CODEWITHSUNDEEP
jqueryhtmlyoutube
Luca Belletti
Luca Belletti

Reputation: 103

Play YouTube video only after setting display:block

When the image is clicked, the video is loaded by changing the display between video and image. But upon page load, the video starts before the click, even while it is display:none.

How can I start the video only after the <div> becomes display:block?

<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
  <img src="http://www.like-agency.it/media/k2/items/cache/d6086de322f98f66cc694f32ea284557_XL.jpg" style="cursor:pointer" />
</div>
<div style="display:none">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/drwLL6I_xPo?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

Upvotes: 0

Views: 641

Answers (1)

piraces
piraces

Reputation: 1348

If you manage the change of the style from display: none to display: block then you can include a simple jQuery snippet (inside your event function).

$("iframe").attr('src', "https://www.youtube.com/embed/drwLL6I_xPo" + "? autoplay=1");

Also you have to remove the "autoplay=1" from your actual iframe. Then the video should not autoplay when the div is hidden. Only when you change the src (when div goes display: block) the video will autoplay.

Upvotes: 1

Related Questions