Воспроизводить видео с youtube при наведении на картинку

03.08.19 18:24:14 03.08.19 18:24:14 102
<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>