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

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 link 并发现了您的代码存在的几个问题，因此您未能达到预期/期望的结果：

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 ( "load order" )，将 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.

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

What's the best way to change the youtube player size after mouseover?

javascript

html

iframe

youtube-javascript-api

youtube-iframe-api