Question

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

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

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

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

Answer 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”）是否有在将其绑定到任何事件之前加载。这有助于防止与未定义/ null对象绑定到事件相关的错误。

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.

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

1 个答案: