CODEWITHSUNDEEP
jqueryhtml
David
David

Reputation: 223

jQuery play iframe embedded YouTube video on page load

I would like to auto play Iframe embedded youtube video on page or document load not any click event.

I have tried following ways but it does not play in chrome & mobile device.

<iframe width="800" height="400" src="https://www.youtube.com/embed/W0LHTWG-UmQ?autoplay=1" frameborder="0" allowfullscreen></iframe>

Second Way

jQuery(document).ready(function() {
  jQuery('#playvideo').click(function(ev) {
  
  jQuery("#video_played")[0].src += "&autoplay=1";
    ev.preventDefault();
  });
  
  setTimeout(function() {
    jQuery('#playvideo').trigger('click');
  }, 4000);

}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="video_played" src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&loop=1&playlist=W0LHTWG-UmQ&autoplay=1" frameborder="0" allowfullscreen></iframe>
<a rel="wp-video-lightbox"  style="display: none;" href="#" id="playvideo">Play video</a>

I only want to play youtube embedded video during load page not any clicking event.

Upvotes: 3

Views: 7615

Answers (3)

Steve Wojcik
Steve Wojcik

Reputation: 41

Wont autoplay on chrome unless you add mute to video. mute=1

Upvotes: 3

Mohamed Salman
Mohamed Salman

Reputation: 29

you can add autoplay=1 in the end of the youtube link. please refer below.

     <iframe width="1280" height="720" src="https://www.youtube.com/embed/ofKxLfdUGnk?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Upvotes: 0

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution https://codepen.io/Shiladitya/pen/prwJKB

iframe {
  width: 100%
}
<iframe height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

Just add ?rel=0&autoplay=1

Upvotes: 1

Related Questions