Question

91

Display video in modal

rated 0 times [ 97] [ 6] / answers: 1 / hits: 21874 / 5 Years ago, fri, february 1, 2019, 12:00:00

I'm looking for a way to dynamically display a video in a modal pop-up, without being embedded to YouTube.

$(function() {

  $(.video).click(function () {

    var theModal = $(this).data(target),

        videoSRC = $(this).attr(data-video),

        videoSRCauto = videoSRC + ;

    $(theModal + ' source').attr('src', videoSRCauto);

    $(theModal + ' button.close').click(function () {

      $(theModal + ' source').attr('src', videoSRC);

    });

  });

});

<head>

<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css>

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

  <script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js></script>

</head>



<button class=btn btn-lg video data-video=https://clienti.dk/media/1140/friheden-video.mp4 data-toggle=modal data-target=#videoModal>Play Video</button>



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

    <div class=modal-dialog>

      <div class=modal-content>

        <div class=modal-body>

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

          <video controls>

            <source src= type=video/mp4>

          </video>

        </div>

      </div>

    </div>

  </div>

YouTube Iframe
- Working example with embedded youtube video in iframe

Regular video
- Here I tried to use html video instead. The video gets the right src but it might be a problem with load timing.

Can anyone help me out?

Answers

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

isham

Add To Favorites

Follow

Total Points: 69

Total Questions: 86

Total Answers: 86

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

isham questions

1 NodeJS - TypeError: Busboy is not a constructor

Wed, Jan 19, 22, 00:00, 2 Years ago

1 How to pass query parameters to next.js api handler when calling from inside of getStaticProps

Wed, Dec 2, 20, 00:00, 4 Years ago

1 How to display the values from ajax success data to the html table?

Tue, Feb 25, 20, 00:00, 4 Years ago

1 How to set expanded prop for material ui TreeView component conditionally

Tue, Feb 4, 20, 00:00, 4 Years ago

1 Getting Firebase doc.data is undefined

Sun, Dec 1, 19, 00:00, 5 Years ago

View All

answered 5 Years ago rhett · Accepted Answer

Everything looks good, you are just missing $(theModal + ' video').load();. You have to load the external video if you are setting src runtime.

See the Snippet below:

$(function() {

  $(.video).click(function () {

    var theModal = $(this).data(target),

        videoSRC = $(this).attr(data-video),

        videoSRCauto = videoSRC + ;

    $(theModal + ' source').attr('src', videoSRCauto);

    $(theModal + ' video').load();

    $(theModal + ' button.close').click(function () {

      $(theModal + ' source').attr('src', videoSRC);

    });

  });

});

<head>

<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css>

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

  <script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js></script>

</head>



<button class=btn btn-lg video data-video=https://clienti.dk/media/1140/friheden-video.mp4 data-toggle=modal data-target=#videoModal>Play Video</button>



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

    <div class=modal-dialog>

      <div class=modal-content>

        <div class=modal-body>

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

          <video controls width=100%>

            <source src= type=video/mp4>

          </video>

        </div>

      </div>

    </div>

  </div>

You can test it here