Menu icon Foundation
reveal modal with autoplay video

I'm trying to create a reveal modal that autoplays a video in a modal when you click a link.

As shown here.

http://codepen.io/ceres629/pen

 

2 issues.

1) When I start the video it continues to play, even though I have the 'reset-on-close' option enabled.

2) If I set the youtube link to autoplay, it plays when the page loads, not when the user clicks the link.

 

How do I resolve these 2 issues?

reveal youtube autoplay

I'm trying to create a reveal modal that autoplays a video in a modal when you click a link.

As shown here.

http://codepen.io/ceres629/pen

 

2 issues.

1) When I start the video it continues to play, even though I have the 'reset-on-close' option enabled.

2) If I set the youtube link to autoplay, it plays when the page loads, not when the user clicks the link.

 

How do I resolve these 2 issues?

Rafi Benkual over 3 years ago

I think you'll need to hook into the video's events and bind them to the reveal open and close events.

You can find some of these events on the YouTube API here: https://developers.google.com/youtube/iframe_api_reference

Wikus du Plessis about 3 years ago

You can do the following (remember to change the url):

$(document).on('closed.zf.reveal', '[data-reveal]', function () {
 $('iframe').attr('src', 'https://www.youtube.com/embed/bT8FEOJEFcI');
});
$(document).on('open.zf.reveal', '[data-reveal]', function () {
 $('iframe').attr('src', 'https://www.youtube.com/embed/bT8FEOJEFcI?autoplay=1')
}); 	

alia khan about 2 years ago

Thanks for sharing.

 

Check below given link for youtube multi downloader via this link.

James Lanman almost 2 years ago

It would be great if Zurb published a codepen for best practices when using Youtube or Vimeo videos with the Reveal Modal. It's pretty frustrating trying to get this to work. @Wikus solution was brilliant but only for one video. I have a template part that calls the same video in two different places and it lead to the video playing twice simultaneously only a second apart. After hours and hours of searching super outdated solutions on Stack Exchange I decided to call up a Youtube video iframe via their API then use the F6(this is key) Wikus mentioned to create start and stop events on close and opening reveal. Seems silly to build a framework aimed at saving dev time only to leave such a common UI use case to the wild. Unless I'm missing something. Hope this saves someone a bunch of time. Please let me know if there is a better way to do this. 

 

<script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'YOURID GOES HERE; the numbers AFTER https://www.youtube.com/embed/',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.stopVideo();
// I changed the event.target above from startVideo to stopVideo. When the player is ready I don't want it to start until I open reveal. Key change here.
      }

      
      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
// I DELETED THEIR CODE HERE IN THE SAMPLE TO STOP THE VIDEO AFTER 6 SECONDS... BECAUSE WTF?! WHAT USE CASE DOES THAT SATISFY? 
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
</script>
<script>
// This tells the Youtube Video to start and stop respectively when reveal opens or closes. Note that Foundation 6 has a new way to bind these events so make sure you're not using outdated JS from older version!
$(document).on('closed.zf.reveal', '[data-reveal]', function () {
 player.stopVideo();
});
$(document).on('open.zf.reveal', '[data-reveal]', function () {
player.playVideo();
});
</script>