Каков наилучший способ изменить размер проигрывателя YouTube после наведения курсора мыши?

Я пытаюсь создать эффект масштабирования при работе над проигрывателем YouTube (iframe).Каков наилучший способ изменить размер проигрывателя YouTube после наведения курсора мыши?

В настоящее время я использую API-интерфейс YouTube IFrame Player для создания проигрывателя и запускающего прослушиватель событий onmouseover, чтобы настроить размер игрока при взаимодействии с игроком. И это, похоже, не работает.

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

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

Любые идеи о том, как получить этот бег или другие подходы?

источник

2016-04-18 kat

Я нажал на ссылку 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.

источник

2016-04-22 19:22:00

Каков наилучший способ изменить размер проигрывателя YouTube после наведения курсора мыши?

ответ

Смежные вопросы