Автозапуск YouTube видео, когда видео появляется в определенном контейнере - PullRequest
Новая
       9

Автозапуск YouTube видео, когда видео появляется в определенном контейнере

0 голосов
/ 03 октября 2018 
<div class="lightbox-trigger"></div>

<div class="lightbox-content autoplay"><iframe>...</iframe></div>

<div class="mfp-wrap"></div>

У меня есть .lightbox-trigger, который при нажатии открывает .lightbox-content внутри .mfp-wrap.По умолчанию .lightbox-content скрыт и будет виден только тогда, когда он находится внутри .mfp-wrap

Когда внутри .lightbox-content.autoplay есть видео YouTube, я бы хотел, чтобы видео автоматически воспроизводилось послевидео появляется в .mfp-wrap.

Надеюсь, это имеет смысл.Я попробовал этот jQuery, но он не работает для меня ... 

$(".lightbox-trigger").click(function() { 
    $(".mfp-wrap .lightbox-content.autoplay iframe").attr("src").replace("?", "?autoplay=1&"); 
});

Ответы [ 2 ]

0 голосов
/ 04 октября 2018

Я смог заставить это работать, используя следующее: 

// add parameter when opening video in popup
$(".lightbox-trigger").on("click", function() { 
    $(".mfp-wrap .et_pb_video.autoplay iframe").each(function(){
        var addautoplay = $(this).attr("src")+"&autoplay=1";
        $(this).attr("src",addautoplay);
    });
});

//for removing the parameter when closing the video
$('.lightbox-overlay').click(function() { 
    $(".et_pb_video.autoplay iframe").each(function(){
        var removeautoplay = $(this).attr("src").replace("&autoplay=1", "");
        $(this).attr("src",removeautoplay);
    });
    $.magnificPopup.close();
});
0 голосов
/ 03 октября 2018

Ссылка для вставки видео на YouTube - Добавить свойство 

allow="autoplay; encrypted-media";

Пример ссылки iFrame: 

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

Пример: 

$(".lightbox-trigger").click(function() { 
    $(".mfp-wrap .lightbox-content.autoplay iframe").attr("src").replace("?", "?allow=autoplay; encrypted-media&"); 
});
...