Замена фото на видео

Question

Проблема:

Когда мышкой фокусируюсь на фото не появляется видео.
Когда выходишь с области видимости фото должно ставать на свое место, видео пропадать.

    jQuery(document).ready(function () {
        $('.section_video_img').hover(function (e) {
            e.preventDefault();
           timer= setTimeout((function () {
                $(this).append(`<video class="video" src="https://www.w3schools.com/html/mov_bbb.mp4" muted="muted" loop></video>`);
                $(this).addClass('hide');
                $('.video').paused ? $('.video').play() : $('.video').pause();
                $(this).get(0).currentTime = 0;
            }).bind(this), 1500);
        });
      
        clearTimeout(timer);
    });

img, video{
  width: 100px;
  height: 100px;
  background-color: black;
  display:block;
}
video{
  background-color: green;
}

.section_video_img{
  width: 100px;
  border: 2px solid blue;
  display: block;
}

.hide{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  				<div class="section_video">
					<a href="#" class="section_video_img fa fa-play"><img src="https://spyserp.com/img/link-building-resources.jpg" alt=""></a>
					<a href="#" class="section_video_title">720P | Lorem ipsum dolor sit amet </a>
					<div class="section_video_info">
						<div class="section_video_view">21 500 просмотров</div>
						<div class="section_video_like">12 лайков</div>
					</div>
				</div>
  				<div class="section_video">
					<a href="#" class="section_video_img fa fa-play"><img src="https://spyserp.com/img/link-building-resources.jpg" alt=""></a>
					<a href="#" class="section_video_title">720P | Lorem ipsum dolor sit amet </a>
					<div class="section_video_info">
						<div class="section_video_view">21 500 просмотров</div>
						<div class="section_video_like">12 лайков</div>
					</div>
				</div>
</body>
</html>

Здесь код

БЛОГ НА HUSL

Замена фото на видео

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