[Решено] Автовоспроизведение видео с ютуба

[ArtemiY777]

вод код видео

 

 <div class="video-product">
<iframe src="https://www.youtube.com/embed/HEPUEoBuCa0?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>

как можно заставить видео проигрываться при на ведении. в js слаб. прочитал что через события делается mouseover и mouseout. Но кад дальше не соображу. Подскажите пожалуйста

 

$('iframe').on('mouseover',function(){
    this.play();
});



$('iframe').on('mouseout',function(){
    this.pause();
});

[DEVHUB]

Встроенный код youtube по умолчанию отключен автозапуск. Просто добавьте autoplay=1 в конце атрибута "src". Например: 
 

<iframe width="560" height="315" src="https://www.youtube.com/embed/qp04_S9I8?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

нашел в гугле, ищите лучше 

Змінено 8 липня 2021 користувачем DEVHUB

[antiuser]

7 минут назад, DEVHUB сказал:

Встроенный код youtube по умолчанию отключен автозапуск. Просто добавьте autoplay=1 в конце атрибута "src". Например: 
 

<iframe width="560" height="315" src="https://www.youtube.com/embed/qp04_S9I8?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

нашел в гугле, ищите лучше 

 

не работает, тем более ТС нужно "как можно заставить видео проигрываться при на ведении"

[DEVHUB]

1 минуту назад, antiuser сказал:

 

не работает, тем более ТС нужно "как можно заставить видео проигрываться при на ведении"

факт, не так прочитал суть

[DEVHUB]

https://jsfiddle.net/rhr5p0pg/5/

Вот тут есть пример, как это работает, но работает вроде как некорректно, ссылая на новую политику 

[ArtemiY777]

6 часов назад, DEVHUB сказал:

https://jsfiddle.net/rhr5p0pg/5/

Вот тут есть пример, как это работает, но работает вроде как некорректно, ссылая на новую политику 

вот и я находил несколько примеров, но почему то все они не корректно работали)

[Blast]

10 часов назад, ArtemiY777 сказал:

вод код видео

 

 <div class="video-product">
<iframe src="https://www.youtube.com/embed/HEPUEoBuCa0?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>

как можно заставить видео проигрываться при на ведении. в js слаб. прочитал что через события делается mouseover и mouseout. Но кад дальше не соображу. Подскажите пожалуйста

 

$('iframe').on('mouseover',function(){
    this.play();
});



$('iframe').on('mouseout',function(){
    this.pause();
});

с ютуба вставлять с параметром enablejsapi=1, т.е.

 

<iframe src="https://www.youtube.com/embed/HEPUEoBuCa0?controls=0&enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

 

в js

$('iframe').on('mouseover',function(){
    $(this)[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*')
});


$('iframe').on('mouseout',function(){
    $(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});

[ArtemiY777]

3 часа назад, Blast сказал:

с ютуба вставлять с параметром enablejsapi=1, т.е.

 

<iframe src="https://www.youtube.com/embed/HEPUEoBuCa0?controls=0&enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

 

в js

$('iframe').on('mouseover',function(){
    $(this)[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*')
});


$('iframe').on('mouseout',function(){
    $(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});

Спасибо!!!!! Работает