Question

36

Autoplay video in Bootstrap modal window on modal opening

rated 0 times [ 43] [ 7] / answers: 1 / hits: 45777 / 8 Years ago, tue, november 29, 2016, 12:00:00

I have a Bootstrap 3.3.7 modal window which contains a video using the HTML5 video tag, e.g.

<video controls autoplay>

    <source src=video.mp4 type=video/mp4>

    Your browser does not support the video tag.

</video>

The trouble with this is that when my web page loads, the video starts playing (even though it cannot be seen since the modal is closed, the audio also plays).

I understand that the autoplay tag is doing this. But how can I get the video to autoplay when the modal is loaded? And stop when the modal is closed?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

santana

Add To Favorites

Follow

Total Points: 595

Total Questions: 94

Total Answers: 98

Location: Zambia

Member since Mon, Oct 24, 2022

2 Years ago

answered 8 Years ago tayla · Accepted Answer

You can use the shown.bs.modal and hidden.bs.modal events to run some javascript code when the modal is shown/hidden:

$('#myModal').on('shown.bs.modal', function () {

  $('#video1')[0].play();

})

$('#myModal').on('hidden.bs.modal', function () {

  $('#video1')[0].pause();

})

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

<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css />

<script src=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>

<!-- Button trigger modal -->

<button type=button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal>

  Launch demo modal

</button>



<!-- Modal -->

<div class=modal fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel>

  <div class=modal-dialog role=document>

    <div class=modal-content>

      <div class=modal-header>

        <button type=button class=close data-dismiss=modal aria-label=Close><span aria-hidden=true>&times;</span></button>

        <h4 class=modal-title id=myModalLabel>Modal title</h4>

      </div>

      <div class=modal-body>

        <video controls id=video1 style=width: 100%; height: auto; margin:0 auto; frameborder:0;>

          <source src=https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4 type=video/mp4>

          Your browser doesn't support HTML5 video tag.

        </video>

      </div>

      <div class=modal-footer>

        <button type=button class=btn btn-default data-dismiss=modal>Close</button>

      </div>

    </div>

  </div>

</div>