Контент в <iframe>

144

02 мая 2018, 04:35

Есть frame, который показывает видео с другого сайта, на этом frame нужно разместить image (он будет появляться на определенной секунде и через 3 секунды исчезать, если не кликнем по нему).

Когда происходит клик по нему выплывает PopUp и видео останавливается.

Использую iframe с bootstrap.

Как это можно реализовать?

Answer 1

Если у видео-вендора есть js api, то делается через него. Если же его нет, то это можно сделать через postMessage и DOM/html5 api.

Answer 2

Ставишь два блока друг на друга(frame и изображение). Задаёшь изображению opacity > чем видео и visibility: hidden;. Дальше скрипт

setTimeout(function(){ 
$(.photo).css("visibility", "visible");
 }, `определённая секунда`);

setTimeout(function(){ 
$(.photo).css("visibility", "hidden");
 }, `определённая секунда + 3`);

Чтоб остановить видео надо повесить click на само видео. Продолжить воспроизведение тем же методом