|
Сообщение от mak200
|
|
сделать обертку
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style type="text/css">
.thumb-wrap{
border: 8px #FFD700 solid;
max-width: 560px;
}
</style>
<iframe data-assign="player" width="560" height="315" src="https://www.youtube.com/embed/x-p_ymteSwo" frameborder="0" allowfullscreen></iframe>
<form>
<input type="button" value="Пауза" onclick="player.pauseVideo()">
<input type="button" value="Продолжить" onclick="player.playVideo()">
</form>
<iframe data-assign="player1" width="560" height="315" src="https://www.youtube.com/embed/NslVg_Wxr_Q" frameborder="0" allowfullscreen></iframe>
<form>
<input type="button" value="Пауза" onclick="player1.pauseVideo()">
<input type="button" value="Продолжить" onclick="player1.playVideo()">
</form>
<script src="https://www.youtube.com/iframe_api" async></script>
<script>
const youtubeAPIReady = new Promise(function(resolve) {
window.onYouTubeIframeAPIReady = resolve;
});
const div = document.createElement('div');
div.className = 'thumb-wrap';
for(const player of document.querySelectorAll('iframe[src*="youtube.com"][src*="embed"]')) {
const clone = div.cloneNode();
player.parentNode.replaceChild(clone, player);
clone.appendChild(player)
const url = new URL(player.src);
url.searchParams.set("enablejsapi", "1");
player.src = url.href;
youtubeAPIReady.then(function() {
window[player.dataset.assign] = getYouTubePlayer(player);
});
}
function getYouTubePlayer(element) {
return new YT.Player(element, {
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.PLAYING && !done) {
done = true;
}
}
}
</script>
</body>
</html>