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

将鼠标悬停在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);

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

最佳答案

我单击了您提供的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.

关于javascript - 鼠标悬停后更改youtube播放器大小的最佳方法是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36685184/