CODEWITHSUNDEEP
javascriptyoutube
Mohammed Rabiulla RABI
Mohammed Rabiulla RABI

Reputation: 493

youtube video doesnt autoplay while clicked in chrome

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>

Upvotes: 7

Views: 4123

Answers (3)

Offirmo
Offirmo

Reputation: 19840

According to the comment 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 becomes 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:

  1. you display the fast-loading thumbnail

  2. 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.org/en-US/docs/Web/API/Window/requestIdleCallback

  3. on hover on the thumbnail, you hide the thumbnail, revealing the video below. On click, it should play.

Upvotes: 7

Aganju
Aganju

Reputation: 6395

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.

Upvotes: 7

user6680983
user6680983

Reputation:

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.com/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.com/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.com/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.com/embed/YgmIibSnZs0?rel=0;&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
   

</body>

</html>

Upvotes: 0

Related Questions