Youtube full screen clean view with keyboard control

Question

Is there a way to remove all YouTube items when playing a video in full screen? Remove: buttons, title, more videos, share, playlists, YouTube logo, channel logo and many others. Have a clean view (like when you do not hover the mouse). Both in paused and in play

I have looked at some topics of the type url? Control = 0 & rel = 0 & showinfo = 0 Only control works.

Also comment that if you press "space" or with the "left mouse button" the video has to continue working in the same way, that is, it will pause.

Is there a way to have YouTube in full screen and when you hover over it nothing appears? Also for when the video is paused (the play icon does not have to appear when it is paused either)

Currently I have:

Html iframe

<iframe src="https://www.youtube.com/embed/M7lc1UVf-VE
            ?
            showinfo=0
            &controls=0
            &rel=0
            &modestbranding=1
            &autohide=1
            " 
            frameborder="0" 
        allowfullscreen="allowfullscreen"
        mozallowfullscreen="mozallowfullscreen" 
        msallowfullscreen="msallowfullscreen" 
        oallowfullscreen="oallowfullscreen" 
        webkitallowfullscreen="webkitallowfullscreen"> </iframe>

Here with the arrows it works forward and backward.

Alternative Javascript + Html

<script>
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// VÍDEO ITEMS
var playerDefaults = {autoplay: 0, autohide: 1, modestbranding: 0, rel: 0, showinfo: 0, controls: 0, disablekb: 1, enablejsapi: 0, iv_load_policy: 3};

var options = {
      // Anchura (Opcional - por defecto 640)
      width: 640,
      // Altura (Opcional - por defecto 360)
      height: 390,
      // El identificador del video (Obligatorio)
      videoId: 'M7lc1UVf-VE',
      // Las opciones para el reproductor (Opcional)
      playerVars: playerDefaults,
      // Registro de eventos del reproductor
      events: {
            'onReady': onPlayerReady
        }
    };
    
//    This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', options);
}

//  The API will call this function when the video player is ready.
function onPlayerReady(event) {
    player.setPlaybackRate(2);
    event.target.playVideo();
}
</script>
<div id="player"></div>

Here with the arrows it does not work forward and backward, because they are disabled instead of hidden.

Although I cannot correctly hide all the items.

Is this what you're looking for? https://codepen.io/ccrch/pen/GgPLVW — Maze, Nov 15 '20 at 00:10
It's not what I'm looking for. I am looking to hide the elements when it is in "full screen" — , Nov 15 '20 at 02:16
Please don't make more work for others by vandalizing your posts. By posting on the Stack Exchange (SE) network, you've granted a non-revocable right, under a [CC BY-SA license](//creativecommons.org/licenses/by-sa/4.0), for SE to distribute the content (i.e. regardless of your future choices). By SE policy, the non-vandalized version is distributed. Thus, any vandalism will be reverted. Please see: [How does deleting work? …](//meta.stackexchange.com/q/5221). If permitted to delete, there's a "delete" button below the post, on the left, but it's only in browsers, not the mobile app. — Makyen, Apr 05 '21 at 20:53

score 1 · Answer 1 · answered Nov 15 '20 at 00:03

Youtube doesn't allow you to do that, but there is an option to hide controls when you embed a youtube video. If you really wanted to make the video distraction free, you could use an external service to get the googlevideo.com url and make that the video's source. Unfortunately that breaks YouTube's Terms & Service, so I cannot share any more information about that on Stack Overflow.

jon · Answer 2 · 2021-02-08T04:00:01.477

My answer to this hides everything but you lose access to the title and volume controls but you can still access it with the keyboard which it seems like that's what you want, it's method 1 here you will need to edit the code in codepen and uncomment a line in the css that controls the width of the div, that will give you a full-screen effect since it will populate the width of the window you're currently on

If you want to still control the player with the keyboard player while the user is outside of player focus then you will need to use the youtube embed API that allows communication between the iframe and the external page (your site)

Also one case to consider is what will you do if the user decides to press F on the iframe player since that will bring back the "unclean" version of the player, to circumvent this it seems like it is possible to disallow iframes from going fullscreen given this SO answer all you need to do is add fs=0 to the embed parameters.

Youtube full screen clean view with keyboard control

2 Answers2