У меня есть карта города с разбросанными точками, которая будет показывать видео при наведении на точки, но я не могу понять, как сделать так, чтобы она запускалась автоматически, а затем останавливалась, когда мышь уходит.
Вот рабочий фрагмент с примером: (вот версия JSFiddle)
$(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>Извините, что синяя точка не на месте, мне нужно найти способ заставить ее придерживаться правильных координат.
