CODEWITHSUNDEEP
jqueryyoutube-api
LauraNMS
LauraNMS

Reputation: 2853

want youtube video to play on hover but also not show suggested videos on pause

This problem seems to be you get one, but not the other. If I use the Youtube Player API, I can play videos on mouseon/mouseout with no problem. BUT, if you click the video to pause it, the suggested videos overlay appears. I can't figure out how to get rid of this overlay under these conditions. I can set rel: 0 in the code to prevent the overlay at the end, but not on click-pause.

However, let's say I give up on the API and just use iframe code to embed the video. Now I can get rid of the overlay on click-pause, but I can't get the video to play/pause on mouseon/mouseout.

Am I doomed to make a choice? Or can I have my cake and eat it, too? The other questions I see on stackoverflow address one of these problems, but not both together.

Here's my API code:

<div id="playerPhipps" class="playerLocation"></div>

var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player1;

      function onYouTubeIframeAPIReady() {
        player1 = new YT.Player('playerPhipps', {
          videoId: 'iDf_QZBZBnw',
          events: {
            //'onReady': onPlayerReady,
            //'onStateChange': onPlayerStateChange
          },
          playerVars: {
              'controls':'1',
              'showinfo':'0',
              'playlist': 'iDf_QZBZBnw',
              'loop':'1',
              'modestbranding':'1',
              'autohide':'1',
              'rel': '0',
              'ytp-pause-overlay': '0', //doesn't work
              'ecver': '2' //doesn't work
          }
        });

//Hover play - works great!
        $('.playerLocation').on('mouseover',function(){
            var thisPlayer = $(this).attr('id');
            switch(thisPlayer) {
                case 'playerPhipps':
                    player1.playVideo();
                    break;

            }
            //player.playVideo();

        });

        $('.playerLocation').on('mouseout',function(){
            //player.stopVideo();
            var thisPlayer = $(this).attr('id');
            switch(thisPlayer) {
                case 'playerPhipps':
                    player1.stopVideo();
                    break;

            }
        });

Here's my code if I embed the Youtube video directly into the page:

<iframe class="playerLocation" src="https://www.youtube.com/embed/iDf_QZBZBnw?rel=0&amp;showinfo=0?ecver=2&modestbranding=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Now everything works great, but how to play/pause on hover?

Edit: I looked at this code on the YouTube Player API page, but it doesn't seem to do anything:

https://developers.google.com/youtube/iframe_api_reference#Example_Video_Player_Constructors

Upvotes: 1

Views: 2447

Answers (1)

LauraNMS
LauraNMS

Reputation: 2853

OK, this is what you have to do.

Put in an iframe. 

<iframe id="playerLibrary" class="playerLocation" width="560" height="315" src="https://www.youtube.com/embed/YT2ZOD32lWw?rel=0&amp;showinfo=0&enablejsapi=1" playsinline enablejsapi="1" frameborder="0" allowfullscreen></iframe>

Note: enablejsapi=1 and enablejsapi="1"

Write your code like this:

 var player3;
 $( document ).ready(function() {
            //whatever you want here
 });
 var tag = document.createElement('script');
 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


 function onYouTubeIframeAPIReady() {
        player3 = new YT.Player('playerLibrary', {
        events: {
            'onReady': onPlayerReady,
            //'onStateChange': onPlayerStateChange
        },
        playerVars: {

        }
        });
   }
   function onPlayerReady(event) {
           $('.playerLocation').on('mouseover',function(){
                player3.playVideo();
            });

            $('.playerLocation').on('mouseout',function(){
                player3.stopVideo();
            });
   }

Upvotes: 1

Related Questions