YouTubeプレーヤー（iframe）にマウスをかけたときにズームエフェクトを作成しようとしています。マウスオーバー後にYouTubeプレーヤーのサイズを変更するにはどうすればよいですか？
現在、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>
フィードバック： をない限り、 （「ロードオーダー」）、DOM要素（「player/playerHolder」）がロードされているかどうかをチェックしていないときにjsを最後に置きますそれを任意のイベントにバインドする前にこれにより、イベントにバインドされている未定義/ヌルオブジェクトに関するエラーを防止できます。
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.