my code for youtube embeded in multiple iframes is not working . I want youtube video must play when-CodePudding

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" onm ouseover="Mouseover(this)" onm ouseout="Mouseout(this)" videoId="K-0Mp075kPQ">
<iframe title="YouTube video player" scrolling="no" frameborder="0" onl oad="iFrameResize()" allowfullscreen></iframe>
</div>

<p></p>
<!-- embeded player2 -->
<div id="player1" name="vp" onm ouseover="Mouseover(this)" onm ouseout="Mouseout(this)" videoId="fg4CehuZORA">
    <iframe title="YouTube video player" scrolling="no" frameborder="0" onl oad="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>

CodePudding user response：

To play video with a mouseover without any click you should first remove the onl oad function and call the initYoutubePlayer() function as the document gets ready. Also remove the play:1 parameter from the playerVars object because it will play video automatically as the page load.

Check this one:

<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" onm ouseover="Mouseover(this)" onm ouseout="Mouseout(this)" videoId="K-0Mp075kPQ">
<iframe title="YouTube video player" scrolling="no" frameborder="0" allowfullscreen></iframe>
</div>

<p></p>
<!-- embeded player2 -->
<div id="player1" name="vp" onm ouseover="Mouseover(this)" onm ouseout="Mouseout(this)" videoId="fg4CehuZORA">
    <iframe title="YouTube video player" scrolling="no" frameborder="0" allowfullscreen></iframe>
</div>


<script>

jQuery(document).ready(function(){
    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
        },
        });
    });
}

Mouseover = (el) => {
    let yt_object = YT.get(el.id)
    yt_object.playVideo();
}

Mouseout = (el) => {
    let yt_object = YT.get(el.id)
    yt_object.pauseVideo();
}

</script>
</body>
</html>

I hope this resolve your issue