在静态图像“帧”中包装youtube视频并保持响应调整大小 [英] wrapping a youtube video in a static image "frame" and maintain responsive resizing

问题描述

我有以下空白Macbook图片。

I have the below image of a blank Macbook.

图片为1034×543。

The image is 1034 × 543.

视频在屏幕的灰色区域内。

I want inset a youtube video inside of the "grey" area of the screen. I want it to appear as if the youtube video is playing on the laptop screen.

我还希望笔记本电脑图片/ youtube视频可以缩放，这样当网页是在平板电脑或移动视图中，图片和视频缩小到匹配。

I also want the laptop image / youtube video to scale, so that when the web page is in a tablet or mobile view, the image and video shrink to match.

我试图使用 fitvid.js 完成这一点，但没有运气 - 我可以获得视频适合一个静态的大小，但我不能得到它仍然适合完全调整大小，它变形。

I am trying to use fitvid.js to accomplish this but am not having luck -- I can get the video to fit at one static size but I cannot get it to still fit perfectly on resize, it gets deformed.

以下是我目前的标记：

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 width="715" height="402" 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;
  }
}

推荐答案

可以灌输一些诡计与填充和百分比，这样你就可以相应地缩放。基本上，设置一个纯％基地的容器，一个绝对位置iframe根据容器缩放。

You could instill some trickery with padding and percentages, that way you could have it scale accordingly. Basically, setting up a container that's purely % base, with an absolutely position iframe that scales accordingly to the container.

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%;
}

您只需要添加 ：border-box; 和一些 padding ，将iframe放在屏幕中。查看 http://jsfiddle.net/41sdho4w/

You'd just need to add box-sizing: border-box; and some padding to position the iframe within the screen. Check it out http://jsfiddle.net/41sdho4w/

至再来一点 - 这里是一个版本，有一个容器，以帮助控制 max-width 和 max-height 然后依靠body / viewport http://jsfiddle.net/4g9e3ywy/

To take it a bit further - here's a version with a container to help control the max-width and max-height rather then relying on the body / viewport http://jsfiddle.net/4g9e3ywy/

这篇关于在静态图像“帧”中包装youtube视频并保持响应调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！