鼠标悬停后更改 youtube 播放器大小的最佳方法是什么？答案

【问题标题】：What's the best way to change the youtube player size after mouseover?鼠标悬停后更改 youtube 播放器大小的最佳方法是什么？
【发布时间】：2016-08-09 16:07:26
【问题描述】：

我试图在将鼠标悬停在 youtube 播放器 (iframe) 上时创建缩放效果。

目前我正在使用 YouTube IFrame Player API 来构建播放器并触发 onmouseover 事件侦听器以在将鼠标悬停在播放器上时调整播放器的大小。而且它似乎不起作用。

http://plnkr.co/edit/TOtWD9?p=preview

function zoom() {
       player.setSize(width=200, height=150);
      }
      document.getElementById('player').addEventListener('onmouseover', zoom);

关于如何运行此程序或其他方法的任何想法？

【问题讨论】：

标签： javascript html iframe youtube-javascript-api youtube-iframe-api

【解决方案1】：

我点击了您提供的 plnkr 链接，发现了您的代码存在的几个问题，因此您未能达到预期/期望的结果：

I modified your code as follows:

HTML:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">

  </head>

  <body>

  <div id="playerHolder"></div><div id="player">stage1</div>
  <script src="script.js"></script>
  </body>

</html>

反馈：除非您知道自己在做什么，否则就在某些事情发生时（“加载顺序”）如何处理 js 而言，将 js 放在最后，因为您没有检查 DOM 元素（“player / playerHolder”）是否有在将其绑定到任何事件之前加载。这有助于防止与绑定到事件的未定义/空对象相关的错误。

css:

/* Styles go here */
body { width: 100%; height: 100%; }
#playerHolder{
  border:2px solid red;
  height:100%;
  width:100%;
  position:absolute;
}

Feedback:

The reason for what I did ( may not be the only way to do it ) is to set perspective "over" the YouTube embed. Note that, as far as I know, you cannot modify third party code from your server, in other words, unless there's a API function that allows you to add custom code, such as you binding a hover event onto the YouTube player, you can't just do it.

js:


      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 player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'SjOLOfyn95U',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      function onPlayerReady(event) {
        event.target.playVideo();
      }

      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          //setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }

      function zoom() {
       player.setSize(width=200, height=150);
      }
      document.getElementById('playerHolder').addEventListener('mouseover', zoom, false);

反馈：

1) You targeted the Video embed itself, which I explained the issues relating to that on the css section above.
2) You used 'onmouseover', which I replaced with 'mouseover'


I hope this helps solve your problem.

【讨论】：