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

  • 网页插入视频自适应电脑手机端的方法已关闭评论
  • 1,114 views
  • A+
所属分类:技术分享
点击领取阿里云1000元优惠券

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

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

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

  1. <iframe height=580 width=460 src='www.laiqun.cn' frameborder='allowfullscreen'></iframe>

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

自适应的方法:

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

  1. <div class="videoBox">
  2. <iframe height=100% width=100% src='www.laiqun.cn' frameborder='allowfullscreen'></iframe>
  3. </div>

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

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

  1. .videoBox{
  2. position:relative;
  3. width:100%;
  4. height:480px;
  5. }
  6. @media(max-width:549px){
  7. .videoBox{
  8. height:120px;
  9. width:190px;
  10. }
  11. }

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

  • 微信公众号
  • 微信扫一扫关注我们
  • weinxin
  • 微信小程序
  • 微信扫一扫访问小程序
  • weinxin