如何以 9:16 的纵横比将 iframe 视频的缩略图 100% 覆盖到包装器中？答案

【问题标题】：How to cover the thumbnail of an iframe video 100% to the wrapper in 9:16 aspect ratio?如何以 9:16 的纵横比将 iframe 视频的缩略图 100% 覆盖到包装器中？
【发布时间】：2021-05-02 18:25:29
【问题描述】：

我正在使用 iframe 标记从我的谷歌驱动器播放一个 9:16 纵横比的视频。 iframe 被包裹在一个 div 周围，并且 div 的样式被设置为没有黑条。视频保持其纵横比，但缩略图没有。缩略图覆盖了包装器的所有高度，但不包括宽度。我希望缩略图也保持 9:16 的纵横比。

另外，我没有添加自定义缩略图。

.potrait_9by16
   {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-bottom: 177.777%; /* 9:16 Aspect Ratio*/
   }

.potrait_9by16 iframe 
  {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     width: 100%;
     height: 100%;
 }

<div className="potrait_9by16">
     <iframe            
        width="100%"
        height="100%"
        frameborder="0"
        src={videoObject.src}
        allow="fullscreen"
     ></iframe>
</div>

Here is an image of the wrapper

【问题讨论】：

标签： javascript html css iframe

【解决方案1】：

在https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video下面试试：

<!DOCTYPE html>
<html>
<body>

<style>
div.outer { overflow: hidden }
div.outer > div.inner { position: relative; margin: 0 -109.7283%; padding: 88.8888888% 0; overflow: hidden }
div.outer > div.inner > iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
</style>

<div class="outer">
<div class="inner">
<iframe width="100%" height="100%" src="https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview">
</iframe>
</div>
</div>

</body>
</html>

不过，它可能会扰乱视频播放。播放开始时，视频控件（进度条等）会被裁剪。

用我提供的代码替换那里的代码。

我刚刚检查了你的代码，看起来你需要的是：

.x { overflow: hidden }
.neg { position: relative; margin: 0 -109.7283; padding: 88.8888888% 0 }
.neg > iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }

外部 div 只使用 x 类，内部 div 只使用 neg 类。应该可以吧。

我曾考虑在播放时删除负边距，并且正在尝试一些类似的东西，但没有完成它。它应该在某种程度上可以工作，但我发现黑色边框的缩略图可能会在播放开始之前显示一小段时间（至少我尝试过的方式）。如果没问题，你可以试试那个方法。我想到的是显示一个覆盖 iframe 的不可见 div（透明覆盖），它可以捕获点击并将 iframe src 切换为 autoplay=1 URL。看看你能不能让它发挥作用。如果我有时间，我可能会进一步研究。

我正在使用与 iframe 相同样式的 JavaScript 添加一个 div，就在 iframe 之后：

.overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }

如果这个 div 是最后添加的，它已经是最顶层的了。否则，使用 z-index。

然后处理 div 上的 'click' 事件。

上面的 div 覆盖技术有它的局限性。以下技术可能会更好：

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <title>Player</title>
    <div id="player"></div>

body { background: #efe; padding: 2em; color: #575 }
h1:first-child { margin-top: 0 }

.player, #player { overflow: hidden }
.player > div, #player > div { position: relative; padding: 88.88888% 0; overflow: hidden }
.player video, .player iframe,
#player video, #player iframe
{ position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
.player:not(.playing) > div, #player:not(.playing) > div
{ margin: 0 -109.7283% }

((W, D) => {
    let $ = a => document.getElementById(a)
    class Player {}
    Player.play = (id, url) => {
        let p = $(id)
            , f = D.createElement('iframe')
            , d = D.createElement('div')
        f.src = url
        f.setAttribute('frameborder', 0)
        f.height =
        f.width = '100%'
        f.addEventListener( 'mouseover', e => f.dataset.overMe = 1 )
        f.addEventListener( 'mouseout', e => delete f.dataset.overMe )
        W.addEventListener( 'blur', e => {
            if (f.dataset.overMe === '1')
                setTimeout(a => p.classList.add('playing'), 1000)
        } )
        p.innerHTML = ''
        d.appendChild(f)
        p.appendChild(d)
    }
    W.Player = Player
})(window, document);

Player.play('player', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')

看看您是否可以将此最新更新与多个 iframe 一起使用...

您的问题可能是因为您可能对所有播放器 div 使用了一个 id（可能是相同的 id）。当使用多个播放器 div 时，您需要使用唯一的 id，并为 div 使用 class="player" 而不是 id="player"：

<div id="player-1" class="player"></div>
<div id="player-2" class="player"></div>
<div id="player-3" class="player"></div>

如果还是不行，给我看一个演示（也许在你的网站上），我会看看。调用 id like 的 play 方法

Player.play('player-1', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')
Player.play('player-2', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')

【讨论】：

我使用的标记与您提供的完全相同。唯一的区别是你的高度和宽度是内联的。我正在使用我的谷歌驱动器中的 9:16 肖像视频。视频运行时，没有黑条，并且保持 9:16 的纵横比。唯一的问题是缩略图。
我的意思是在 iframe 标签中设置了高度和宽度。我将您的确切代码复制粘贴到我的文件中。它仍然是一样的。缩略图没有保持 9:16 的纵横比。另外，“分享您的视频播放器”是什么意思？我正在使用标记将 src 属性设置为“<a href="/default/index/tourl?u=aHR0cHM6Ly9kcml2ZS5nb29nbGUuY29tL2ZpbGUvZC8xNmlES0dKWEJzemsybkk5aDlCTkczckoyekQ4NUZTTnkvdmlldz91c3A9c2hhcmluZw%3D%3D" rel="nofollow" target="_blank">drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/…</a>”。我猜，播放器是youtube播放器。试试这个链接的标签。看看你是否遇到同样的问题，请通知我。谢谢
这很奇怪。当我单击谷歌驱动器链接时，缩略图与视频的纵横比相同。另外，我使用谷歌浏览器开发工具检查了缩略图，发现图像尺寸为 640x360，即 16:9。所以，缩略图本身不是问题。不知何故，缩略图的图像被拉伸和扭曲。我怀疑 iframe 不应该播放这样的肖像视频。我可以以某种方式定位在浏览器中创建的标记吗？ [下文继续]
[继续] 另外，我发现当我点击视频的播放按钮时，会出现另一个播放按钮（就像你在 youtube 上看到的那样），视频在 0:00 暂停等待被播放。此时，由于没有缩略图，并且视频包装看起来与我想要的完全一样。我想知道是否可以在页面加载时以编程方式单击“白色”播放按钮。此外，您对负边距的解决方案也不起作用。但是，谢谢你的尝试。我真的很感激。
整个缩略图屏幕是 9:16，因为当我播放视频时，没有黑条，视频是 9:16。缩略图看起来被拉伸了。