WordPress 视频嵌入iframe自适应手机的问题，在网上中了许多方法，但仍然没有一个满足我的米扑博客的要求

最后，在借鉴众多解决方案的基础之启发下，结合本站的移动端自适应，原创做了一个初步解决方案

 

米扑博客之iframe自适应手机

1. 修改style.css 

/** 大于960px 适应PC端 **/
@media screen and (min-width:960px) {
    #main .post-content .mimvp-iframe iframe {
        width:640px;
        height:400px;
    }
}

/** 小于960px 适应移动端 **/
@media(max-width:960px) {
    .mimvp-iframe {
        height: 300px;
    }   
    #main .post-content .mimvp-iframe iframe {
        width:100%;
        height:100%;
    }   
}

css 样式含义是：

1） PC端（大于960px），视频宽高分别为 640 和 400

2）移动端（小于960px），视频父节点固定高度为300px，iframe宽高自适应手机等屏幕

 

2. 复制优酷视频链接

例如，打开优酷视频 童话镇MV 陈一发：https://v.youku.com/v_show/id_XMjgxMTM0Nzg3Ng==.html

点击视频左下角的分享到QQ等的链接，会弹出 通用代码，复制链接，如下图

把原链接

<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgxMTM0Nzg3Ng==' frameborder=0 'allowfullscreen'></iframe>

修改为

<p class="mimvp-iframe">
    <iframe allowfullscreen="allowfullscreen" frameborder="0" scrolling="no" src="https://player.youku.com/embed/XMjgxMTM0Nzg3Ng=="></iframe>
</p>

即除掉了原iframe的宽和高，增加了一层父节点 <p class="mimvp-iframe"> 

好处有很多，如不干扰其它页面嵌入的iframe、可以更方便的控制子节点的iframe高宽

 

3. 查看移动端的效果

米扑博客：陈一发儿：童话镇

 

缺点：移动端时高度固定为300px，无法实时调整缩放；PC端也固定了，改变仅在PC变到移动端时才改变。

恩，网上搜的几个解决方案，在下面也给出来，并做简要点评，毕竟自己实践了一遍，让别人少走弯路 

 

参考方案一

1）在主题的主css，如style.css中加入以下css代码 

.lxtx-video {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
}
.lxtx-video iframe,.lxtx-video object,.lxtx-video embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

 

2）以iframe方式引用视频网站的视频

然后，后台发布视频时，建议以iframe方式引用视频网站的视频，

因为iframe方式在pc端和手机端都能完美显示视频，另外2种方式就不一定了！

在中文本模式编辑器里用下面的类似方法引用：

<p class="lxtx-video"><iframe src="视频网站提供的iframe方式里的src链接" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

 

3）演示示例

以优酷视频为例，如这个视频：http://v.youku.com/v_show/id_XMTU2MzI4MTE5Ng==.html，用它的通用方式（也就是iframe方式），它提供的代码如下：

<iframe height=498 width=510 src="http://player.youku.com/embed/XMTU2MzI4MTE5Ng==" frameborder=0 allowfullscreen></iframe>

那么我们要在文章中插入自适应视频的话，在文本编辑器中要插入以下代码就ok了：

<p class="lxtx-video"><iframe src="http://player.youku.com/embed/XMTU2MzI4MTE5Ng==" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

参考示例：龙笑天下

 

简单点评：此方法第1)步css里 padding-bottom:56.25%; 也就是视频下方会 padding 很大一片空白，严重影响了用户美观体验

 

 

参考方案二

WordPress解决优酷、土豆视频移动端观看问题并自适应

1）拷贝函数

在主题函数文件function.php里面添加以下代码 

// 支持优酷视频移动端iframe
function wp_iframe_handler_youku($matches, $attr, $url, $rawattr) {
    if (wp_is_mobile()) {
        $height = 300;
    } else {
        $height = 485;
    }   
    $iframe = '<iframe width=100% height=' . $height . 'px src="http://player.youku.com/embed/' . esc_attr($matches[1]) . '" frameborder=0 allowfullscreen></iframe>';
    return apply_filters('iframe_youku', $iframe, $matches, $attr, $url, $ramattr);
}
wp_embed_register_handler('youku_iframe', '#http://v.youku.com/v_show/id_(.*?).html#i', 'wp_iframe_handler_youku');

// 支持土豆视频移动端iframe
function wp_iframe_handler_tudou($matches, $attr, $url, $rawattr) {
    if (wp_is_mobile()) {
        $height = 300;
    } else {
        $height = 485;
    }   
    $iframe = '<iframe width=100% height=' . $height . 'px src="http://www.tudou.com/programs/view/html5embed.action?code=' . esc_attr($matches[1]) . '" frameborder=0 allowfullscreen></iframe>';
    return apply_filters('iframe_tudou', $iframe, $matches, $attr, $url, $ramattr);
}
wp_embed_register_handler('tudou_iframe', '#http://www.tudou.com/programs/view/(.*?)/#i', 'wp_iframe_handler_tudou');
wp_embed_unregister_handler('youku');
wp_embed_unregister_handler('tudou');

 

2）添加视频方法

直接在可视化下添加链接就OK 

http://v.youku.com/v_show/id_XMTQzOTU2NDg1Mg==.html

 

简单点评：实测此方法，没有成功，可能是我用法不对，请大牛在下方留言给出正确用法

 

 

参考推荐：

WordPress 添加音乐盒

WordPress CKEditor smiley表情工具栏定制

PC端网页自适应手机屏幕大小

PC网站自动适配手机网页的方法技巧

CSS 自适应多屏大小的 @media 用法详解

BootStrap：一天完成把PC网站改为自适应