CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Deep13
Deep13

Reputation: 47

bootstrap youtube video modal plays automatically

As the webpage is opened, all the videos starts playing at the background automatically after 5 seconds i.e., the audio is heard even before clicking the image. how can i stop this from happening, the video has to open on button click and close. The videos have to work only on button click and close.

how would i achieve this? this is the fiddle https://jsfiddle.net/aaronfranco/L6xvLcuL/14/

<script>
$("#myBtn").click(function(){
$("#myModal").modal({backdrop: false});
});

$("#myBtn1").click(function(){
$("#myModal1").modal({backdrop: false});
});

$("#myBtn2").click(function(){
$("#myModal2").modal({backdrop: false});
});
</script>

Upvotes: 1

Views: 943

Answers (4)

Nicolas Galler
Nicolas Galler

Reputation: 1309

Your iframes are loading automatically and playing the videos, even though you have not shown the dialog yet.

You could change to use a single modal element, do NOT specify the src value on the iframe, then fill the src value from your button click event so the frame only starts loading when you open the dialog, i.e.

$('#myModal iframe').attr('src', movieURL);
$('#myModal').modal();

Upvotes: 1

Bhavya Khurjawal
Bhavya Khurjawal

Reputation: 336

Just set autoplay=0. It's boolean. 0 far false 1 for true.

<iframe class="size" src="https://www.youtube.com/embed/rFuEu3dj-nA?autoplay=0" ;frameborder="0" allowfullscreen></iframe>

after ?autoplay in youtube link.Hope this helps.

Upvotes: 1

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

Problem is in you <iframe> code where a attribute autoplay is there with value 1 which fires event to play video automatically when opens

Change autoplay value from 1 to 0

By changing value to 0 u tell browser not to play video automatically. Here is the code

<iframe class="size" src="https://www.youtube.com/embed/rFuEu3dj-nA?autoplay=0" ;frameborder="0" allowfullscreen></iframe>

Now with Jquery on button click change the attribute value

$('button').on('click', function(){
  $('iframe').attr('autoplay','1');
});

Upvotes: 0

Amr Elgarhy
Amr Elgarhy

Reputation: 68922

First make sure Autoplay = 0 Stop youtube video autoplay

Then you can control when to play exactly using youtube api Hyperlink to play youtube video

Upvotes: 1

Related Questions