Автовоспроизведение/приостановка видео при зависании

Question

У меня есть карта города с разбросанными точками, в которых будут отображаться видеоролики при наведении курсора, но я не могу открыть, как сделать это автоматически, а затем остановиться, когда уйдет мышь.

Вот рабочий фрагмент кода на примере: (вот JSFiddle version)

$(document).ready(function() { 
 
    $('#video1').css("display", "none"); //Hide video initially 
 
    $('#video-wrapper1').mouseenter(function() { 
 
    $('#video1').css("display", "block", "position", "absolute", 
 
     "top", "100px"); //Show video on hover 
 
    }); 
 
    $('#video-wrapper1').mouseleave(function() { 
 
    $('#video1').css("display", "none"); 
 
    }); 
 

 
$("#video1").mouseenter(function(){ 
 
$(this).attr("src",$(this).attr("src") + "?autoplay=1"); 
 
}); 
 

 
$("#video1").mouseleave(function(){ 
 
var src= $(this).attr("src"); 
 
var arr_str = src.split("?"); 
 
$(this).attr("src",arr_str[0]); 
 
});  
 

 
});

.bg { 
 
    min-height: 100%; 
 
    min-width: 1024px; 
 
    width: 100%; 
 
    height: auto; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: -1; 
 
} 
 
@media screen and (max-width: 1024px) { 
 
    img.bg { 
 
    left: 50%; 
 
    margin-left: -512px; 
 
    } 
 
} 
 
#video-wrapper1 { 
 
    position: absolute; 
 
    left: 700px; 
 
    top: 100px; 
 
    display: block; 
 
    width: 15px; 
 
    height: 15px; 
 
    z-index: 99999; 
 
    background: #0073ff; 
 
    border-radius: 50%; 
 
    transition-property: width, height; 
 
    transition-duration: .2s; 
 
    transition-timing-function: linear; 
 
} 
 
#video-wrapper1:hover { 
 
    width: 20px; 
 
    height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://s32.postimg.org/t78dw1h1h/Fundo.png" class="bg" alt="Lisboa"> 
 
<a href="index.html"> 
 
    <img src="http://s32.postimg.org/bdlm2uvt1/Logo.png" alt="" /> 
 
</a> 
 
<div id="video-wrapper1"> 
 
    <iframe id="video1" width="200" height="169" src="https://www.youtube.com/embed/Inufy4FdnRk" frameborder="0" allowfullscreen> 
 
    </iframe> 
 
</div>

Извините, что синяя точка не на месте, мне нужно найти способ, чтобы сделать он придерживается правильных координат.

Answer 1

Вы можете воспроизводить любое видео на YouTube, помещая ?autoplay=1 в конце. Напр.

https://www.youtube.com/embed/Inufy4FdnRk?autoplay=1 

это автоматически воспроизведет ваше видео.

$("#video1").mouseenter(function(){ 
 
    
 
    $(this).attr("src",$(this).attr("src") + "?autoplay=1"); 
 
}); 
 

 
$("#video1").mouseleave(function(){ 
 
    var src= $(this).attr("src"); 
 
    var arr_str = src.split("?"); 
 
    $(this).attr("src",arr_str[0]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<iframe id="video1" width="200" height="169" src="https://www.youtube.com/embed/Inufy4FdnRk" frameborder="0" allowfullscreen> 
 
    </iframe>