网页插入视频自适应电脑手机端的方法

在手机端浏览来群网文章的时候,发现以前写文章放的视频不适合手机浏览,多出了一大截,这严重影响了浏览和美观,在电脑端则正常.于是开始在百度找方法,经过反复测试,完全能解决视频适应电脑而不适应手机的问题.现在分享给大家,希望对各位站长有用。

网站引用各大视频网站的方法很多,目前最流行的是使用<iframe>标签,iframe是一种浮动框架，用这个标签就等于在网页再插入一个网页。它可以通过各种参数来达到不同的效果.比如要设置引用视频的宽度和高度,那么就使用height和width参数来实现<iframe>完整的代码是这样的.

其中height和width分别代表宽和高，注：把上面的 www.laiqun.cn 替换成视频链接.

自适应的方法:

通过给<iframe>元素再加一层容器来实现自适应的。首先，给插入页面加了一层div，并且把插入页面的高度和宽度都调整为100%，这样插入的页面就根据父层级的大小来自动变化了。

注:先把上面的网址替换成视频链接,然后把代码添加到需要放视频的位置.

有了上面这样一个容器，我们就可以根据自己的需要来编写相应的css代码了

把上面的代码添加到主题目录下的style.css 文件最底部即可。注:上面代码的1-5行是控制电脑端的视频大小,6-11行是控制手机端的视频大小,这个可以根据自己网站情况修改。