klickte ich den plnkr Link, der Sie zur Verfügung gestellt und nahm auf ein paar Fragen, die Sie mit Ihrem Code haben, daher versagen Sie die erwarteten/gewünschten Ergebnisse zu erzielen:
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>
Feed-back: Es sei denn, Sie wissen, was Sie tun, in Bezug darauf, was mit js zu tun ist, wenn bestimmte Dinge passiert sind ("load order"), setzen Sie js zuletzt, da Sie keine Überprüfung durchführen, wenn das DOM-Element ("player/playerHolder") geladen ist bevor Sie es an irgendwelche Ereignisse binden. Dies verhindert, dass Fehler in Bezug auf nicht definierte/null-Objekte an Ereignisse gebunden werden.
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);
Feed-back:
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.