网页中插入优酷土豆视频并让它自适应的方法

 2016-12-14 13:06

今天看到一篇文章,讲的是Wordpress主题自适应插入视频的方法。其实,我这个拍拍看主题对于在网页里面插入视频已经有一个很好的方案了,只是没总结出来,今天我来说说我的方法。

优酷土豆

先说说网页插入视频的原理

网页上面插入视频有很多方法,现在比较流行的是用<iframe>标签来做,这样节省资源。当然,如果您获取的flash源来自己做web结构的话,那就更简单了。这里我重点还是放在第一个方法上。

iframe是一种浮动框架,用在网页里面就相当于在网页里面再插入一个网页。视频的宽度和高度一般是根据插入的iframe的大小来定位的。我们常常看到插入视频的代码应该是这个样子的:

<iframe height=580 width=460 src='...' frameborder=0 'allowfullscreen'></iframe>

这里的height、width基本上就是视频的大小了。

自适应的方法

我是通过给<iframe>元素再加一层容器来实现自适应的。如果我们无法控制插入页面,那么通过容器来控制自适应就是一个不错的选择。

首先,我给插入页面加了一层div,并且把插入页面的高度和宽度都调整为100%,这样插入的页面就根据父层级的大小来自动变化了。

<div class="videoBox">
<iframe height=100% width=100% src='...' frameborder=0 'allowfullscreen'></iframe>
</div>

有了这样一个控制关系,我们就可以根据自己的需要来编写相应的css代码了,比如这样:

.videoBox{
    position:relative;
    width:100%;
    height:480px;
}
@media (max-width: 549px){
    .videoBox{
        height: 120px;
        width: 190px;
    }
}


作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: