bootstrap youtube video modal plays automatically

Question

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>

score 1 · Answer 1 · edited May 23 '17 at 12:33

1

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

edited May 23 '17 at 12:33

Community

1
1

answered Apr 06 '16 at 11:50

Amr Elgarhy

66,568
69
184
301

score 1 · Answer 2 · answered Apr 06 '16 at 11:54

1

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.

answered Apr 06 '16 at 11:54

Bhavya Khurjawal

336
2
8

score 1 · Answer 3 · answered Apr 06 '16 at 12:00

1

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();

answered Apr 06 '16 at 12:00

Nicolas Galler

1,309
10
10

I prefer this idea as well, as it will be better for page load as well. – Amr Elgarhy Apr 06 '16 at 12:01
how would i implement it for three videos as in the fiddle – Deep13 Apr 06 '16 at 12:16

Gaurav Aggarwal · Answer 4 · 2016-04-06T11:53:15.437

0

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');
});

edited Apr 06 '16 at 11:53

answered Apr 06 '16 at 11:49

Gaurav Aggarwal

9,809
6
36
74

but the video has to play automatically upon button click – Deep13 Apr 06 '16 at 11:50
and also in the background we can hear the audio even before doing anything – Deep13 Apr 06 '16 at 11:52
how do i implement to the above fiddle – Deep13 Apr 06 '16 at 12:01

bootstrap youtube video modal plays automatically

4 Answers4