Воспроизводить видео с youtube при наведении на картинку
∘JS 03.08.19 03.08.19 615
на главную сниппетов<![CDATA[<html lang="en">
<head>
<title>Document</title>
<style>
.box {width: 270px; height: 150px;overflow: hidden; position: relative;display: inline-block; margin: 15px;}
.box .overlayer {position: absolute; left: 0; top: 0; width: 100%;height: 100%; z-index: 1;}
.box .overlayer img {position: absolute;width: 30px; top: 10px; left: 10px;}
.box img {width: 270px;}
.box .video {width: 270px;height: 150px;}
.layer {position: fixed;top: 0;left: 0;width: 100%;height: 100%;
background: #fff;z-index: 1111;padding: 5rem;box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box" data-video-id="668nUCeBHyY" data-hover="false">
<img src="http://keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<div class="overlayer">
<img src="assets/images/play.png" class="playvideo" alt="">
</div>
</div>
<div class="box" data-video-id="r3fE6FQT82s" data-hover="false">
<img src="http://keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<div class="overlayer">
<img src="assets/images/play.png" class="playvideo" alt="">
</div>
</div>
<div class="box" data-video-id="mcixldqDIEQ" data-hover="false">
<img src="http://keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<div class="overlayer">
<img src="assets/images/play.png" class="playvideo" alt="">
</div>
</div>
<div class="layer">
Loading...
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://www.youtube.com/iframe_api'></script>
<script>
var players = [];
function onYouTubeIframeAPIReady() {
$('.box').each(function(i) {
playersCount++;
$(this)
.attr('data-id', i)
.append('<div id="player-' + i + '">');
}).each(function(i) {
$('.layer').hide();
});
}
function pasteFrame(el) {
var $box = $(el);
var $id = $box.attr('data-id');
var player = new YT.Player('player-' + $id, {
height: '150', width: '270',
videoId: $box.attr('data-video-id'),
playerVars: {
'autoplay': 0,
'controls': 0,
'disablekb': 1,
'fs': 0,
'iv_load_policy': 0,
'modestbranding': 1,
'rel': 0,
'showinfo': 0
},
events: {
'onReady': onPlayerReady
}
});
function onPlayerReady(event) {
if($box.attr('data-hover') === 'true') {
$box.find('img').eq(0).hide();
player.playVideo();
}
player.setPlaybackQuality('small');
players[$id] = player;
}
}
$(document).ready(function() {
$('.playvideo').mouseenter(function() {
var $box = $(this).parent().parent();
var $id = $box.attr('data-id');
$box.attr('data-hover', 'true');
if($box.find('iframe').length) {
players[$id].playVideo();
$box.find('img').eq(0).hide();
} else {
pasteFrame($box);
}
});
$('.playvideo').mouseleave(function() {
var $box = $(this).parent().parent();
var $id = $box.attr('data-id');
$box.find('img').eq(0).show();
$box.attr('data-hover', 'false');
if($box.find('iframe').length && players[$id]) {
players[$id].stopVideo();
}
});
});
</script>
</body>
</html>]]> на главную сниппетов
