css让嵌入网站上的视频手机端自适应

微信扫一扫,分享到朋友圈

css让嵌入网站上的视频手机端自适应
收藏 00

在嵌入的代码周围添加一个 div 标签。 使用 CSS 类 video-responsive 使您的代码现在看起来像这样:

<div class="video-responsive">
    <iframe width="420" height="315" src="/" frameborder="0" allowfullscreen></iframe>
</div>

然后在您的样式表文件之一中添加一些 CSS 属性:

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

 

一个热爱互联网的咸鱼
上一篇

火车头采集+WordPress发布常用数据库表字段

下一篇

帝国CMS判断字段值为空显示不同内容

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

热门

    抱歉,30天内未发布文章!
返回顶部