Menu
I got this code to embed the youtube video at dynamic way while image is clicked its working fine but not autoplayed while clicked.
its working fine in mozilla but not works in chrome.
i am placing images(video thumbnails) instead of video iframes in webpage to reduce the page load and when those thumbnails are clicked i am loading the iframe dynamically through jquery everything is working fine but the loaded video is not auto played but giving another button to play a youtube video.
i want it to be auto played while clicked in chrome. please help out
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>YouToubes replace example</title>
<script src="jquery-1.11.2.min.js"></script>
<style>
p {margin-bottom:2em;}
iframe,.ytLoader {display:block;margin:0 auto;width:50vw;height:37.5vw;border:0.5vw solid #ccc;}
.ytLoader {position:relative;cursor:pointer;overflow:hidden;}
.ytLoader>.cover {width:100%;height:auto;}
.ytLoader>.playBtn {position:absolute;top:50%;left:50%;width:20%;height:auto;transform:translate(-50%,-50%);opacity:0.5;}
</style>
<script>
function youTubes_makeDynamic() {
var $ytIframes = $('iframe[src*="youtube.com"]');
$ytIframes.each(function (i,e) {
var $ytFrame = $(e);
var ytKey; var tmp = $ytFrame.attr('src').split(/\//); tmp = tmp[tmp.length - 1]; tmp = tmp.split('?'); ytKey = tmp[0];
var $ytLoader = $('<div class="ytLoader">');
$ytLoader.append($('<img class="cover" src="https://i.ytimg.com/vi/'+ytKey+'/hqdefault.jpg">'));
$ytLoader.append($('<img class="playBtn" src="play_button.png">'));
$ytLoader.data('$ytFrame',$ytFrame);
$ytFrame.replaceWith($ytLoader);
$ytLoader.click(function () {
var $ytFrame = $ytLoader.data('$ytFrame');
$ytFrame.attr('src',$ytFrame.attr('src')+'?autoplay=1');
$ytLoader.replaceWith($ytFrame);
});
});
};
$(document).ready(function () {youTubes_makeDynamic()});
</script>
</head>
<body>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
</body>
</html>
385
Starting in Version 62, this is a feature in Chrome - to avoid annoying ads to blare their sound at you when you open a page (https://developers.google.com/web/updates/2017/09/autoplay-policy-changes).
It will not autoplay unless the user activates it for the site; Chrome has that built in now.
You can change that for your own installation in the settings.
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
