我有一张空白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 width="715" height="402" src="//www.youtube.com/embed/**url**" frameborder="0" allowfullscreen></iframe>
</div>
</div>
上海社会科学院：
.macbook-wrapper{
background: url('../img/content/home/macbook.png') no-repeat;
.fluid-width-video-wrapper {
width: 97.5%;
background: #000;
}
}
解决方法
你可以用填充和百分比灌输一些技巧,这样你就可以相应地缩放.基本上,设置一个纯粹基数的容器,具有相应于容器扩展的绝对位置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;和一些填充以将iframe定位在屏幕内.看看http://jsfiddle.net/41sdho4w/
更进一步 – 这是一个带有容器的版本,可以帮助控制最大宽度和最大高度,而不是依赖于主体/视口http://jsfiddle.net/4g9e3ywy/
