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=".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"]');
$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="/'+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="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p><iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p><iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
</body>
</html>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./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."]');
$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./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./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./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./embed/YgmIibSnZs0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
</body>
</html>- Which version of chrome are you facing this issue? – Narendra Commented Apr 1, 2019 at 5:59
- 2 developers.google./web/updates/2017/09/… – Narendra Commented Apr 1, 2019 at 6:01
- In newer versions of Chrome it will only autoplay if you mute the audio. See Best practices for web developers section of the above article @Narendra mentioned for information on using muted autoplay that then allows users to unmute if they choose to. – epsilon42 Commented Apr 8, 2019 at 3:35
3 Answers
Reset to default 7Starting 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./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.
According to the ment from @Narendra, Chrome is preventing autoplay, thus you from relying on autoplay to pretend you are reacting to the user's click.
There are 2 solutions I can think of:
Solution 1:change the UX of your app so that when clicking on the thumbnail, it bees clear that the video will need another click to run, for example by opening it inside a modal.
Solution 2: (not tested) give back the play control to the video:
you display the fast-loading thumbnail
you load the videos without waiting for the user to click on it. To keep a fast load, you can wait for idle to create the underlying iframes https://developer.mozilla/en-US/docs/Web/API/Window/requestIdleCallback
on hover on the thumbnail, you hide the thumbnail, revealing the video below. On click, it should play.
This code auto play youtube video
In you code problem is that javascript code and in embedded youtube url code.
you can try this::
<!DOCTYPE html>
<html>
<head>
<title>YouToubes replace example</title>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--<script src="jquery-1.11.2.min.js"></script>-->
<style>
p {
margin-bottom: 2em;
}
</style>
</head>
<body>
<p><iframe width="560" height="315" src="https://www.youtube./embed/YgmIibSnZs0?rel=0;&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p><iframe width="560" height="315" src="https://www.youtube./embed/YgmIibSnZs0?rel=0;&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p><iframe width="560" height="315" src="https://www.youtube./embed/YgmIibSnZs0?rel=0;&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
</body>
</html>