wordpress引入土豆优酷视频真正实现自适应宽高

wordpress引入土豆优酷视频真正实现自适应宽高,第1张

概述511遇见最近录制了几套易语言大漠制作游戏外挂的视频,发布在了土豆,在引入自己的网站时,由于设置了视频的高度,宽度,在移动端浏览时出现了高度无法自适应,给浏览者带来极大的不舒服,缺乏体验性,百度了半天,

511遇见最近录制了几套易语言大漠制作游戏外挂的视频,发布在了土豆,在引入自己的网站时,由于设置了视频的高度,宽度,在移动端浏览时出现了高度无法自适应,给浏览者带来极大的不舒服,缺乏体验性,百度了半天,调试了半天,大约有两个角度来解决,一个是Js,一个是CSS,最后不得不大声说,伟大的CSS,使用CSS控制及方便又不影响加载速度,总之看到网上铺天盖地的文章也不知道谁是原创,更不知道站长测试了没有,总之我只有CSS的方法成功!强烈推荐CSS的方法,以下方法来源网络,不知道谁是原创了,无法保留版权。

一、CSS方法

在主题引入的CSS文件中,干脆直接在style.CSS文件中引入以下内容:(以下方法来自空气网络)

.rat0-vIDeo {

position:relative;

padding-bottom:56.25%;

height:0;

overflow:hidden;

}

.rat0-vIDeo iframe,.rat0-vIDeo object,.rat0-vIDeo embed {

position:absolute;

top:0;

left:0;

wIDth:100%;

height:100%;

}

以iframe方式引入视频一般有三种方法,我们要想在移动端支持,我们要采用HTML5,及通用方式的引入方法,以土地为例: