Как воспроизвести видео при наведении на изображение?

Question

[Kirito Kirigaya]

Мне нужно что-бы при наведении на изображение, JS записывал HTML в DOM.
А когда мышку убираешь возвращается изображение и удаляется видео.
Я написал это в CodePen

Answer 1

[Kirito Kirigaya]

video-box-1 - это div в котором лежит видео и изображение
photo-1 - само изображение, которое мы видим изначально
main-product__photo-off - это класс в котором мы отключаем изображение (display: none;)
video-1 - это видео которое появится при наведении на изображение
main-product__video-on - это класс в котором мы включаем видео (display: block;)

$(".video-box-1").hover(function() {
    $(".photo-1").addClass("main-product__photo-off");
    $(".video-1").addClass("main-product__video-on");
}, function() {
    $(".photo-1").removeClass("main-product__photo-off");
    $(".video-1").removeClass("main-product__video-on");
});

Answer 2

[SagePtr]

Тэг video в HTML предназначен для вставки видеофайлов, а не страниц Ютуба. Вам стоит либо отдельно выложить видеофайл и указать прямую ссылку на него, либо использовать iframe или нечто подобное.

Comments

[Kirito Kirigaya]

Я изменил на видео но это работает не корректно