enter image description here

Hello. Tell me whether it is possible to insert a video from "youtube", and instead of the standard YouTube player, replace the "play" button with such as on the screenshot. Or in a nutshell tell the newcomer how it is implemented. Thank.

    1 answer 1

    Good day. This task can be solved by means of the Youtube API. For example, we have a player, and there is a block with the necessary information, positioned strictly above the player, by clicking on the block - you need to hide it and execute the play command from the player.

    var yt_frame = document.querySelector('.video__player'), video_placeholder = document.querySelector('.video__placeholder'); video_placeholder.addEventListener('click',play); function play(){ yt_frame.contentWindow.postMessage(JSON.stringify({ 'event': 'command', 'func': 'playVideo', 'args': [] }),'*'); video_placeholder.style.display="none"; } 
     .video { position:relative; width:400px; height:400px; } .video__player { width:100%; height:100%; } .video__placeholder { position:absolute; width:100%; height:100%; background:red; } 
     <div class="video"> <div class="video__placeholder"> Контент </div> <iframe class="video__player" src="https://www.youtube.com/embed/vYrIoMREDQs?enablejsapi=1" frameborder="0" allowfullscreen></iframe> </div>

    Fiddle - https://jsfiddle.net/erm0j1tq/