Load youtube embed on mouseenter and mute

Question

I would like to load an embedded youtube video when the cursor hovers over a div with the video muted. I got the "mouse enter" part working and the video loads properly. But I couldn't get the video to mute... Please help!

I'm using the following to load an embedded youtube video on mouseenter, which works fine:

HTML

                <div class="featured desktop_only">
                <a href="#">
                    <div class="video_block shadow id1">
                        <img src="http://img.youtube.com/vi/mzygYS-vN1E/maxresdefault.jpg" />
                        <div class="info">
                            <span>Mary Chan</span>
                            <h2>In vestibulum elementum nisl quis maximus</h2>
                            <p>
                                Mei novum propriae ne, adhuc option ei nec. Cu vix accusam persequeris, etiam alienum sed cu. Ex qui eius oblique salutandi. Et vis adolescens cotidieque, ut veri vidit sed. Cu meis movet oblique pri, usu an malis iriure detracto.
                            </p>
                            <div class="spec">
                                Wednesday, July 28, 2015<br>
                                10:52 · 3,450 Views
                            </div>
                        </div>
                        <div class="preview"></div>
                    </div>
                </a>
            </div>

jQuery

        $('.video_block.id1').mouseenter(function() {
            $('.video_block.id1 .preview').html('<iframe id="ytplayer" type="text/html" src="https://www.youtube-nocookie.com/embed/scqYWrcwp_s?rel=0&autoplay=1&controls=0&showinfo=0&loop=1&iv_load_policy=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>');
        });
        $('.video_block.id1').mouseleave(function() {
            $('.video_block.id1 .preview').html('');
        });

I've tried the suggestions on the following question but it doesn't seem to be work once I couple it with the mouse enter: How do you mute an embedded Youtube player?

Also note that I plan to have multiple divs to hover on and load different videos for each, but only one will play each time.

Thanks in advance!

score 0 · Answer 1 · answered May 18 '15 at 17:58

I don't think there is a mute parameter that you can pass to the iframe. So you would have to use the iFrame api from youtube.

In your HTML every preview div would need an unique id maybe use the video id:

<div class="preview" id="M7lc1UVf-VE" />

Then your code could look something like this:

(I copied this from the youtube page and made some changes)

  // This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

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

  //   This is called by the api once the API code downloads.
  var apiReady = false;
  function onYouTubeIframeAPIReady() {
    apiReady = true;
  }

  // creates a new ytPlayer or strts a video once one hovers over a preview element
  var players = {};
  $('.preview').mouseenter(function() {
      if (!apiReady) {
          return; // api not loaded yet since we can hover again just do nothing - maybe you want to do something cooler here
      }
      var videoId = $(this).attr('id');  

      if (players[videoId]) {
          // player is loaded just play
          players[videoId].playVideo();
      } else {
          // load player
          var player = new YT.Player(videoId, {
              height: '390',
              width:  '640',
              videoId: videoId,
              events: {
                'onReady': onPlayerReady,
              }
          });
          // store player by video id so we can use it later
          players[videoId] = player;
      }
  })

  $('.preview').mouseleave(function() {
      player.stop()
      // maybe also hide it here
  }

  // The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.mute();
    event.target.playVideo();
  }

ian_sawyer · Answer 2 · 2015-11-12T09:31:03.177

0

Add

muted="muted"

to the iframe.

Also make sure to add

"?wmode=opaque&autohide=1&autoplay=1&enablejsapi=1" to the end of your youtube link instead of

"?rel=0&autoplay=1&controls=0&showinfo=0&loop=1&iv_load_policy=3&enablejsapi=1"

edited Nov 12 '15 at 09:31

answered May 18 '15 at 18:10

ian_sawyer

221
2
3

Load youtube embed on mouseenter and mute

2 Answers2