I want youtube video embeded in multiple iframes on pageload to be played when my mouse hover over it and pause when hover out. My below code works, but on pageload i have to click somewhere on the page. What I want is, without click, the page should respond to my mouseover and mouseout event. Can any one help me to do this.
<html>
<script src="https://www.youtube.com/player_api"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<!-- Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Youtube player API -->
<script src="//www.youtube.com/player_api"></script>
<body>
<!-- embeded player1 -->
<div id="player0" name="vp" onmouseover="Mouseover(this)" onmouseout="Mouseout(this)" videoId="K-0Mp075kPQ">
<iframe title="YouTube video player" scrolling="no" frameborder="0" onload="iFrameResize()" allowfullscreen></iframe>
</div>
<p></p>
<!-- embeded player2 -->
<div id="player1" name="vp" onmouseover="Mouseover(this)" onmouseout="Mouseout(this)" videoId="fg4CehuZORA">
<iframe title="YouTube video player" scrolling="no" frameborder="0" onload="iFrameResize()" allowfullscreen></iframe>
</div>
<script>
jQuery(document).ready(initYoutubePlayer);
function initYoutubePlayer() {
jQuery('div[name="vp"]').each(function(){
let vid =jQuery(this).attr('videoId');
let player = new YT.Player(this, {
height: '250',
width: '640',
enablejsapi: 1,
videoId: vid,
playerVars: {
'controls': 0,
'rel': 0,
'playlist': vid,
'loop': 1,
'modestbranding': 1,
'play':1
},
});
})
}
Mouseover = (el) => {
let yt_object = YT.get(el.id)
yt_object.playVideo();
}
Mouseout = (el) => {
let yt_object = YT.get(el.id)
yt_object.pauseVideo();
}
jQuery(document).ready(initYoutubePlayer);
</script>
</body>
</html>
To play video with a mouseover without any click you should first remove the onload function and call the
initYoutubePlayer()function as the document gets ready. Also remove theplay:1parameter from the playerVars object because it will play video automatically as the page load.Check this one:
I hope this resolve your issue