Hide the div when playing youtube video and show when paused

  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('maVideo', { height: '163', width: '294', videoId: 'QuIwUTO0H7M', events: { 'onStateChange': onPlayerStateChange } }); } var done = false; function onPlayerStateChange(event) { if(player.getPlayerState() == 3 || player.getPlayerState() == 1) { console.log("hide div"); $('.div_to_be_hidden').hide(); } if(player.getPlayerState() == 0 || player.getPlayerState() == 2) { console.log("return div"); $('.div_to_be_hidden').show(); } } 

 .liner-line { left: 7px; position: relative; transition: left 0.4s ease-in-out; } .boxs .box-liner .box { left: 3px; z-index: 2; width: 294px; height: 163px; padding: 0 0 0; position: relative; text-align: center; margin: 0 14px 20px 0; border: 1px solid #efeff0; transition: box-shadow .3s ease-in-out; -o-transition: -o-box-shadow .3s ease-in-out; -ms-transition: -ms-box-shadow .3s ease-in-out; -moz-transition: -moz-box-shadow .3s ease-in-out; -webkit-transition: -webkit-box-shadow .3s ease-in-out; } .div_to_be_hidden { z-index: 3; top: 127px; height: 36px; width: 293px; position: absolute; background: rgba(45, 0, 255, 0.56); } .liner { height: 185px; position: relative; white-space: nowrap; } .font { left: 230px; z-index: 8; width: 52px; bottom: 26px; height: 27px; position: absolute; border-radius: 30px; display: inline-block; background: rgba(241, 239, 239, 0.2); } .liner-next { z-index: 8; right: -4px; bottom: 4px; background-position: 0 0px; -o-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -webkit-transition: all 0.3s ease-out; } .liner .font .liner-prev.disable { opacity: 0.3; cursor: default; } .liner .font .liner-prev { z-index: 8; right: 9px; bottom: 4px; background-position: 0 0px; -o-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -webkit-transition: all 0.3s ease-out; } .liner .font .liner-next { top: 7px; right: 6px; position: absolute; display: inline-block; background-color: #fff; width: 16px; height: 13px; cursor: pointer; } .liner .font .liner-prev { top: 7px; right: 31px; position: absolute; display: inline-block; background-color: #fff; width: 16px; height: 13px; cursor: pointer; } .news_span { top: 7px; left: 24px; color: #FFFFFF; position: absolute; font: 14px/16px 'Roboto-Regular', sans-serif; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="liner"> <div class="font"> <span class="mad liner-next"></span> <span class="liner-prev disable"></span> </div> <div class="liner-line"> <div class="box blocks" data-id="1"> <div class="div_to_be_hidden"> <span class="news_span"> Выпуск 1</span> </div> <div id="maVideo"> </div> </div> </div> </div>