html 设置视频宽100,如何使youtube iframe嵌入的视频自适应 (100%宽度)

一般我们用这样的方式嵌入youtube视频:

frameborder="0" allowfullscreen>

如果我们能将宽度的数值设置为 100% 会更加方便,但由于高度仍需要指定,因此并不可行,我们需要像这样把它包在一个container里:请注意类名,并且移除宽和高度属性。

frameborder="0" allowfullscreen class="video">

使用以下css样式:

.container {

position: relative;

width: 100%;

height: 0;

padding-bottom: 56.25%;

}

.video {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

原理: container元素赋值了一个0值的高度和一个百分比的 bottom padding, 这个百分比的bottom padding 百分比是和容器宽度的百分比

,这就得到了一个固定的宽比率。但是为了让这个iframe显示在这个0高度的container里面,你需要设置container定位为relative,并将div里面的iframe的定位设置成absolute.

另一种方式是使用媒体查询。

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值