i have div, "c1" display:none except when div "p1" hovered. in "c1" there youtube video set auto play. in chrome when div visible video starts when disappears video keeps playing. there way stop html , css or need js?
html:
<div class="p1 parent"></div> <div class="c1 child"><iframe class="embededinchild" src="https://www.youtube.com/embed/vlrulbtd-oo?autoplay=1" frameborder="1"></iframe> <p class="childdescription">enjoy beautiful downtown bethesda x miles campus!</p></div> css:
.child { display: none; width:494px; height:300px; position:absolute; background-color: #e3ebf1; border-radius: 10px; border: 1px solid #333333; left:0px; top:-320px; } .parent{ background-color: #7bb9e0; width:110px; height:110px; border:2px solid black; display: block; border-radius:55px; margin: 5px; display: inline-block; float:left; } .parent:hover{ background-color: #cccccc; border-color: #93305d; } .embededinchild{ width:474px; height:250px; margin: 5px 10px 0px 10px; } p.childdescription{ line-height:12px; margin:5px 5px 0px 5px; padding:0px; color: #333333; text-align: center; } .p1:hover + .c1 { display: block; }
i adopted script shared earlier in comment , have created alternate version play video on mouseenter on element , stopping when moving out of element.
http://jsfiddle.net/588vwkrw/6/
code reference (but use jsfiddle, external youtube script link not working within snippet widget )
var players = []; // array stock each videos youtube instances class $(function() { var playvideo = function() { var id = $(this).attr("href"); $(id).show(); var pid = id.replace("#", "") players[pid].playvideo(); } var stopvideo = function() { var id = $(this).attr("href"); $(id).hide(); var pid = id.replace("#", "") players[pid].stopvideo(); } $(".playvid").mouseenter(playvideo).mouseleave(stopvideo); }); function onyoutubeiframeapiready() { var videos = $('iframe'), // iframes elements playingid = null; // stock current playing video (var = 0; < videos.length; i++) // each iframes { var currentiframeid = videos[i].id; // iframe id //alert(currentiframeid); players[currentiframeid] = new yt.player(currentiframeid); // stock in array instance } } onyoutubeiframeapiready();<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script async="false" type="text/javascript" src="https://www.youtube.com/player_api"></script> <div> hover on anchor links play related videos</div> <a class="playvid" href="#player"> play video 1 </a> <br/> <br/> <br/> <a class="playvid" href="#player2"> play jquery video</a> <br/> <br/> <br/> <iframe style="display:none" id="player" width="385" height="230" src="https://www.youtube.com/embed/erdxb4ikgjm?rel=0&wmode=opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe> <iframe style="display:none" id="player2" width="385" height="230" src="https://www.youtube.com/embed/hmxghhnokcu?rel=0&wmode=opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>