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

发布时间:2019-12-08 整理:脚本之家
脚本之家收集整理的这篇文章主要介绍了html – 将YouTube视频包装在静态图像“框架”中,并保持响应式调整大小脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!
我有一张空白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/

总结

以上是脚本之家为你收集整理的html – 将YouTube视频包装在静态图像“框架”中,并保持响应式调整大小全部内容,希望文章能够帮你解决html – 将YouTube视频包装在静态图像“框架”中,并保持响应式调整大小所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!