CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Avinash Gupta
Avinash Gupta

Reputation: 328

Auto click youtube play button on load

I want to auto click the youtube play button on page load in mobile device. I am using the iframe to show youtube video . Its auto play on desktop but showing play button on mobile device . I am using this

  <script type="text/javascript">
$(function() {
    $('.ytp-large-play-button').click();
});
</script>

but not working for me . Any help?

Thanks in advance

Upvotes: 1

Views: 8650

Answers (3)

Learning
Learning

Reputation: 20001

Videos can autoplay on desktop but why can you not get them to autoplay on mobile websites when the page loads? The answer is that the different OS developers intentionally disabled autoplay on mobile devices in order to protect user’s bandwidth. Many data providers charge based on the amount of data consumed, so the OS developers decided it was in the best interest of the user to not have a video automatically begin playing when the page loaded so it would not start racking up data charges. Instead mobile web videos require the user to click them to start.

check more

I am not sure if you can trigger event inside iFrame...

Why doesn't video Autoplay on Mobile device https://www.aerserv.com/why-does-video-autoplay-on-mobile-devices-not-work/

For your case try this

A solution I've just been working on for autoplaying would be to instantiate the player with an empty video on page load:

var player = new YT.Player('yt-media-player', {
  height: height,
  width: width,
  videoId: ''
});

Then on the click event of opening the lightbox you can load the particular video and call it to play:

player.loadVideoById(youtubeId);

player.playVideo();

Details here

Upvotes: 2

Myco Claro
Myco Claro

Reputation: 483

If You are using jquery make sure you have a Jquery file or You can use CDN check below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

use this one when your page is loaded the button is trigger.

 $(document).ready(function(){
    $('.ytp-large-play-button').trigger('click');
 });

Upvotes: 2

bipin patel
bipin patel

Reputation: 2111

you can use iframe onload event like this

<iframe src="http://..." onload='playVideo();'>
<script type="text/javascript">
function playVideo(){
   $('.ytp-large-play-button').click();
}
</script>

Try this this function call when iframe is load

Upvotes: 2

Related Questions