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>