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

Question

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

let boxImage = document.querySelector(".picContainer") // Бокс с изображением
let image = document.querySelector(".image") // Изображение
const cod = '<video autoplay loop id="v0" muted width=500 preload="none" src="https://upread.ru/video/art144-1.mp4"></video>'

boxImage.addEventListener('mouseover', onVide);
boxImage.addEventListener('mouseout', offVide);

function onVide() {
    image.style.display = 'none';
    boxImage.innerHTML = cod;
}

function offVide() {
    image.style.display = 'block';
    let elem = document.getElementById("v0");
    elem.remove();
}

.picContainer {
  width: 500px;
  height: 300px;
  border: 5px solid orange;
}
.image {
  position: relative;
  width: 500px;
  height: 300px;
}
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 300px;
}

<div class="picContainer">
<img class="image" src="https://images.hdqwalls.com/download/black-sun-horizon-4k-9n-3840x2400.jpg" alt="">
</div>

Answer 1

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");
});

БЛОГ НА HUSL

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

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