JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.youtube.com/iframe_api"></script>
<iframe autoplay: 1,d="videoframe" class="embed-responsive-item" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>
<div id="paper">Paper</div>
JavaScript
(function ($) {
$(document).ready(function () {
$paper = $('#paper');
var player;
window.onYouTubeIframeAPIReady = function() {
console.log('onYouTubeIframeAPIReady');
player = new YT.Player('videoframe');
console.log(player);
player.addEventListener('onStateChange', function(event) {
console.log('State is:', event.data);
if (event.data == YT.PlayerState.PLAYING) {
$paper.slideUp();
} else {
$paper.slideDown();
}
});
}
});//document ready
}) (jQuery);