带有键盘控制的 Youtube 全屏清晰视图答案

【问题标题】：Youtube full screen clean view with keyboard control带有键盘控制的 Youtube 全屏清晰视图
【发布时间】：2021-02-26 13:46:03
【问题描述】：

有没有办法在全屏播放视频时删除所有 YouTube 项目？删除：按钮、标题、更多视频、分享、播放列表、YouTube 徽标、频道徽标等。有一个干净的视图（比如当你不悬停鼠标时）。在暂停和播放中都可以

我看过一些url类型的主题？控制 = 0 & 相对 = 0 & 显示信息 = 0 只有控制有效。

还请注意，如果您按“空格”或使用“鼠标左键”，视频必须以相同的方式继续播放，也就是说，它会暂停。

有没有办法让 YouTube 全屏显示，当你将鼠标悬停在它上面时，什么都没有出现？也适用于视频暂停时（播放图标也不必在暂停时出现）

目前我有：

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>

这里的箭头可以向前和向后工作。

替代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>

这里的箭头不能向前和向后工作，因为它们被禁用而不是隐藏。

虽然我无法正确隐藏所有项目。

【问题讨论】：

这是您要找的吗？ codepen.io/ccrch/pen/GgPLVW
这不是我要找的。我希望在“全屏”时隐藏元素
为什么？这是为谁设计的？
请不要通过破坏您的帖子为他人增加工作量。通过在 Stack Exchange (SE) 网络上发帖，您已在 CC BY-SA license 下授予 SE 分发内容的不可撤销权利（即无论您未来的选择如何）。根据 SE 政策，分发非破坏版本。因此，任何破坏行为都将被撤销。请参阅：How does deleting work? …。如果允许删除，则帖子下方左侧有一个“删除”按钮，但仅在浏览器中，而不是移动应用程序中。

标签： javascript html jquery css youtube

【解决方案1】：

我对此的回答隐藏了所有内容，但您无法访问标题和音量控件，但您仍然可以使用键盘访问它，这似乎就是您想要的，这是方法 1 here 您需要编辑代码在 codepen 中并取消注释控制 div 宽度的 css 中的一行，这将为您提供全屏效果，因为它将填充您当前所在窗口的宽度

如果您想在用户不在播放器焦点时仍然使用键盘播放器控制播放器，那么您需要使用 youtube embed API，它允许 iframe 和外部页面（您的网站）之间进行通信

另外一个需要考虑的情况是，如果用户决定在 iframe 播放器上按 F，你会怎么做，因为这会带回播放器的“不干净”版本，为了规避这一点，似乎可以禁止 iframe鉴于此SO answer，从进入全屏状态您需要做的就是将 fs=0 添加到嵌入参数中。

【讨论】：

【解决方案2】：

Youtube 不允许您这样做，但是当您嵌入 youtube 视频时，可以选择隐藏控件。如果您真的想让视频分散注意力，您可以使用外部服务获取googlevideo.com url 并使其成为视频的来源。不幸的是，这破坏了 YouTube 的 Terms & Service，因此我无法在 Stack Overflow 上分享更多关于此的信息。

【讨论】：