将 youtube 视频包装在静态图像“框架”中并保持响应式调整大小

Posted 2023-02-24

【中文标题】将 youtube 视频包装在静态图像“框架”中并保持响应式调整大小

【英文标题】：wrapping a youtube video in a static image "frame" and maintain responsive resizing

【发布时间】：2014-10-23 18:39:34

【问题描述】：

我有下面一张空白 Macbook 的图片。

图片为1034 × 543。

我想在屏幕的“灰色”区域内插入一个 youtube 视频。我希望它看起来好像 youtube 视频正在笔记本电脑屏幕上播放一样。

我还希望笔记本电脑图像/youtube 视频缩放，以便当网页在平板电脑或移动设备视图中时，图像和视频会缩小以匹配。

我正在尝试使用 fitvid.js 来完成此操作，但运气不佳 - 我可以让视频适合一个静态尺寸，但我无法让它在调整大小时仍然完美适合，它会变形。

以下是我当前的标记：

html：

<div class="col-sm-12">
  <div class="title">
    <h2>What's New</h2>
    <small>ASC Sneak Peak</small>
  </div>
  <div class="macbook-wrapper">
    <iframe   src="//www.youtube.com/embed/**url**" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

SASS：

.macbook-wrapper
  background: url('../img/content/home/macbook.png') no-repeat;

  .fluid-width-video-wrapper 
    width: 97.5%;
    background: #000;
  

【问题讨论】：

类似jsfiddle.net/41sdho4w 的东西？只是想确保我在发布答案之前正确理解了您的问题。

太棒了，我相信有很多方法可以做到这一点，但这就是我要解决的问题。 @我在下面的评论，我的意思是你可以用 CSS 围绕 iframe 构建一个 macbook，并且在没有所有定位和超精确填充的情况下也有这个比例。

这也是响应式的吗？

【参考方案1】：

你可以用填充和百分比来灌输一些技巧，这样你就可以让它相应地缩放。基本上，设置一个纯粹以 % 为基础的容器，其绝对位置 iframe 会根据容器进行缩放。

HTML

<div>
  <iframe></iframe>
</div>

CSS

div 
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;

div iframe 
    background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

您只需添加box-sizing: border-box; 和一些padding 即可将iframe 定位在屏幕内。看看http://jsfiddle.net/41sdho4w/

更进一步 - 这是一个带有容器的版本，可以帮助控制 max-width 和 max-height，而不是依赖于主体/视口 http://jsfiddle.net/4g9e3ywy/

【讨论】：

嗨！感谢您提供出色的解决方案，它可以工作，但 macbook 是页面宽度的 100%。我希望它可以优雅地向下缩放，但不要超过 1034x543。如果我将 max-width 和 max-height 添加到容器 div，它似乎与 iframe 填充混淆

我的错！让我更新一下，可能只需要一个指定的容器，% 可以基于它。

我为整个东西创建了一个额外的容器——你可以在这里设置你想要的最大宽度/最大高度——子元素%填充/宽度等将依赖于此。

完美。在返回这里查看您的更新之前，我实际上意识到了容器技巧。 :) 感谢您的帮助！

太棒了..我只是搜索这种类型的东西.. +1 @Evan