CODEWITHSUNDEEP
javascriptjqueryhtml
BrokenCode
BrokenCode

Reputation: 961

Play embedded YouTube video in modal popup?

Is it possible to have a YouTube video which has been embedded on a website, play in a modal popup when the user clicks on it?

The videos are embedded using the embed code from YouTube, here an example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/iRYDYrj3Bfw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

I have looked at several scripts which load YouTube videos into modal popups, such as this one: https://appleple.github.io/modal-video/

But all of them so far do it with buttons or banners.

I was hoping it would be as easy as doing something like this:

<div id="wrapper">
<youtube iframe></iframe>
</div>

Then in javascript listen for a click on #wrapper ?

I would like to emulate the behavior of the following website (you may need to scroll down to the section called "Arbeiten" and click on one of the videos): http://www.heimat.wien/#arbeiten

Upvotes: 2

Views: 32002

Answers (2)

Shuhad zaman
Shuhad zaman

Reputation: 3390

I am using the following example for bootstrap 3/4. it worked for me.

to show youtube thumnail of video

<img src="https://img.youtube.com/vi/<?= $row['videoID'] ?>/mqdefault.jpg" class="video-btn img-fluid cursor-pointer" data-toggle="modal" data-src="https://www.youtube.com/embed/<?= $row['videoID'] ?>" data-target="#myModal">

note that $row['videoID'] showing from my database

here is the modal that holds the video on iframe

<!-- Modal -->
<div class="modal videomodal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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>        
        <!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always">></iframe>
</div>

and this simple script 

<script type="text/javascript">
    //for youtube video modal
$(document).ready(function() {
      var $videoSrc;  
      $('.video-btn').click(function() {
          $videoSrc = $(this).data( "src" );
      });
      console.log($videoSrc);
      $('#myModal').on('shown.bs.modal', function (e) {
      $("#video").attr('src',$videoSrc + "?rel=0&amp;showinfo=0&amp;modestbranding=1&amp;autoplay=1" ); 
      })
      $('#myModal').on('hide.bs.modal', function (e) {
          $("#video").attr('src',$videoSrc); 
      })
});
</script>

if you want to add some style. you can use this

.videomodal .modal-dialog {
      max-width: 800px;
      margin: 30px auto;
  }    
.videomodal .modal-body {
  position:relative;
  padding:0px;
}
.videomodal .close {
  position:absolute;
  right:-30px;
  top:0;
  z-index:999;
  font-size:2rem;
  font-weight: normal;
  color:#fff;
  opacity:1;
}
.cursor-pointer{
    cursor: pointer;
}

Upvotes: 2

jsadev.net
jsadev.net

Reputation: 2590

According to Ingus's solution you could overlay an div on your iframe like i did here:

$(document).ready(function() {
  autoPlayYouTubeModal();
});

function autoPlayYouTubeModal() {
  var trigger = $('.trigger');
  trigger.click(function(e) {
    e.preventDefault();
    var theModal = $(this).data("target");
    var videoSRC = $(this).attr("src");
    var videoSRCauto = videoSRC + "?autoplay=1";
    $(theModal + ' iframe').attr('src', videoSRCauto);
    $(theModal).on('hidden.bs.modal', function(e) {
      $(theModal + ' iframe').attr('src', '');
    });
  });
};
.holder {
  width: 560;
  height: 315px;
  position: relative;
}

.frame {
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 560%;
  height: 315px;
  cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="holder">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/VF1Yz05iQM0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <div class="overlay trigger" src="https://www.youtube.com/embed/VF1Yz05iQM0" data-target="#videoModal" data-toggle="modal"></div>
</div>

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <button type="button" class="close btn-round btn-primary" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>

Working fiddle: https://jsfiddle.net/nqxeo695/

Notice: you should better use own images or screenshots of the videos instead of iframes, because each iframe will load the video instantly. The more videos you put on your site, the longer your site will need to load.

Upvotes: 8

Related Questions