JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.youtube.com/iframe_api"></script>
<div class="videoWrapper">
<div id="video">
Для просмотра видео необходимо установить Flash player и активировать JavaScript.
</div>
</div>
<div class="clickMe">ClickMe</div>
<script>
var ytplayer;
var videoBox;
var videoWidth = 500;
var videoHeight = 300;
function onYouTubePlayerAPIReady() {
videoBox = document.getElementById('video');
videoBox.ytplayer = new YT.Player(videoBox, {
videoId: 'pxGnxEQr1uc',
playerVars: {
wmode: "transparent"
},
height: videoHeight,
width: videoWidth
})
}
</script>
CSS
.videoWrapper {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
#video {
position: absolute;
left: -9999px;
top: -9999px;
}
JavaScript
$(".clickMe").click(function() {
$("#video").css({ "left": 0,
"top": 0 });
videoBox.ytplayer.playVideo();
});