Видео поверх iframe

Question

никак не могу понять, как добавить видео, поверх другого?

Например есть iframe с видео из Ютуба, как поверх этого ifram'a добавить другое видео с ютуба, затем по окончанию открывалось другое? То, которое скрыто

    <div class="tabs-block__content d-none video-inside video-responsive">
                     
        <iframe 
        src="[xfvalue_trailer]?autoplay=0&color=white" 
        width="560"
        loading="lazy"
        height="400" 
        frameborder="0" 
        title="YouTube video player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
        </iframe>     
</div>

Очень надеюсь на вашу помощь!

Answer 1

Тебе нужно воспользоваться youtube API https://developers.google.com/youtube/js_api_reference. И отслеживать когда закончиться видео. Если видео закончилось то данный ивент возвращает 0. Когда видео закончилось просто добавляй ему display none или opacity 0 на твой вкус. И также через youtube api ты можешь воспроизвести следующее видео.

Вот тут ты ждешь пока оно закончиться:

player.addEventListener("onStateChange", function(state){
    if(state === 0){
        // тут твой код
    }
});

Вот пример как воспроизвести видео:

let video = new YT.Player('#player', {
        height: '315',
        width: '560',
        videoId: 'bpOR_HuHRNs'
});

function playVideo(video) {
  video.playVideo(); // метод playVideo()
};

БЛОГ НА HUSL

Видео поверх iframe

Ответы (1 шт):