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

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,及通用方式的引入方法，以土地为例：