Youtube Video Autoplay in popup

前端未结

关注

 4  1367

I\'ve made a popup and placed a youtube video in it. I set video to autoplay. But the problem is video plays when i open the page. It is auto play in global and i want it to aut

相关标签:

4条回答

北荒

2021-02-03 11:40

Thanks to @Jarod Means script! It works and I uses it since it only requires jQuery (Simple solution = Great solution). But I developed it for multiple video clips, which is great in slideshows, as an example or whenever you need this solution for more then one clip in the same dom. I also made it so it is completely in jQuery.

Just posting it so you can use it as you wish.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <meta charset="utf-8">
    <title>Youtube-player test</title> 
    <style>
        .youtube-player iframe {
            display: none;
        }

        .youtube-player.active iframe {
            display: block;
        }
    </style>
</head>
<body>
    <div class="youtube-player">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/XzXjuDM_Z54" frameborder="0" allowfullscreen></iframe>
        <a href="#" class="youtube-link-start">Open window</a>
        <a href="#" class="youtube-link-stop">Close window</a>
    </div>
    <div class="youtube-player">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/l2EYyzXJIdE" frameborder="0" allowfullscreen></iframe>
        <a href="#" class="youtube-link-start">Open window</a>
        <a href="#" class="youtube-link-stop">Close window</a>
    </div>

    <script>

        jQuery('.youtube-player').each(function(){
            jQuery(this).on('click', '.youtube-link-start', function(){
                jQuery(this).parent().addClass('active');

                var loc = $(this).siblings('iframe').attr('src');
                var startloc = loc + "?autoplay=1";
                $(this).siblings('iframe').attr('src', startloc);
            });

            jQuery(this).on('click', '.youtube-link-stop', function(){
                jQuery(this).parent().removeClass('active');

                var loc = $(this).siblings('iframe').attr('src');
                var stoploc = loc.replace("?autoplay=1", "");
                $(this).siblings('iframe').attr('src', stoploc);
            });
        });
    </script>
</body>
</html>

I guess you can keep on changing/developing this with html, css and jQuery to whatever fit your needs. :)

0 讨论(0)

慢半拍i

2021-02-03 11:42

From the YouTube JavaScript Player API Reference:

The JavaScript API allows users to control the YouTube chromeless or embedded video players via JavaScript. Calls can be made to play, pause, seek to a certain time in a video, set the volume, mute the player, and other useful functions.

You can use the API's player.playVideo(), player.pauseVideo() and player.stopVideo() method.

0 讨论(0)
发布评论:

提交评论
- 加载中...

爱一瞬间的悲伤

2021-02-03 11:48

I think you want something like that :

LIVE EXAMPLE

Basically i use the API Javascript to add actions play and pause to the video.

And i use default function of Foundation to add an event when to the player.

HTML

 <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

  <div id="myModal" class="reveal-modal" data-reveal>
    <h2>Awesome</h2>
    <div id="player"></div>
    <a class="close-reveal-modal">&#215;</a>
  </div>

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: '315',
        width: '560',
        videoId: 'l-gQLqv9f4o',
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
}


function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
      //player is playing
    } else {
      //player is paused
    }
}

function stopVideo() {
    player.stopVideo();
}

function playVideo() {
  player.playVideo();
}

function pauseVideo() {
  player.pauseVideo();
}


$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
    playVideo();
});

$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
  pauseVideo();
});

0 讨论(0)

囚心锁ツ

2021-02-03 11:52
So, Ive read a bunch of different threads on this and most of what Ive seen is pretty complicated. I went a much more simple route.
```
    $('.reveal-overlay').click(function(e){
    var loc = document.getElementById('myFrame').src;
    var stoploc = loc.replace("?autoplay=1", "");
    document.getElementById('myFrame').setAttribute('src', stoploc);
    });

    $('.playVideo').click(function(e){
    var loc = document.getElementById('myFrame').src;
    var autoloc = loc + "?autoplay=1";
    document.getElementById('myFrame').setAttribute('src', autoloc);
    });
```
This will basically just append ?autoplay=1 to a YouTube video once the modal is opened. The class .playVideo is on whatever button youre using to open your modal window.

The class .reveal-overlay is created by Foundation. So when the overlay is clicked it removes any ?autoplay=1 from the video url.

Hope this helps anyone running into this problem. It's simple and should work for multiple different videos, plus, if someone has js turned off, it won't play anything in the background.

One more thing, the video you load should be a regular non-autoplay video. This will turn it into an autoplay after clicked ony and return it to non-autoplay when closed.
0 讨论(0)
发布评论:

提交评论
- 加载中...