iframe嵌入哔哩哔哩youtube视频自适应高宽，兼容手机端

最近比较喜欢拍视频，才在博客里开通了视频栏目！选用的wordpress主题对视频也很友好，可以直接头部视频展示，但是使用之后发现一个问题：手机端浏览的时候，高度总是很难兼容，如果定义了 iframe的高度，在PC端是合适的，但在移动端就被拉的很长。

今天终于解决这个问题了

解决办法如下：

---

1. 增加CSS样式如下：

.meta-media {
  position: relative;
  margin-bottom: 30px;
  float: left;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
}
.video {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

2. 调用iframe时增加DIV块meta-media，并给iframe加class 为video,如下：

<div class="meta-media"><iframe src="//player.bilibili.com/player.html?aid=14841794&cid=24183753&page=1" frameborder="no" scrolling="yes" allowfullscreen="allowfullscreen" high_quality="1" framespacing="1" class="video" > </iframe></div>

这样两步就解决了！

原理： meta-media元素赋值了一个0值的高度和一个百分比的 bottom padding， 这个百分比的bottom padding 百分比是和容器宽度的百分比,这就得到了一个固定的宽比率。但是为了让这个iframe显示在这个0高度的meta-media里面，你需要设置meta-media定位为relative，并将div里面的iframe的定位设置成absolute.

显示效果如下：

---

• PC端显示效果：
  

• 移动端显示效果：
  

最新解决办法：

---

因为我使用的主题Shamrock对图片和视频形式的文章列表和页面模板使用的是同一个，按照上面更改样式后导致图片显示错位了。因此只得重新研究以新的方法来解决。
基本思路就是使图片和视频使用不同的模板和循环，解决步骤如下：
1. 恢复meta-media样式，新增样式div iframe ,全部代码如下：

.meta-media {
  margin-bottom: 30px;
  float: left;
  width: 100%;
}
.iframe{  
  position: relative;
  margin-bottom: 30px;
  float: left;
  width: 100%;
  height: 0;
  padding-bottom: 75%;}
.video {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

2. 在functions.php下新增文章形式代码，如下

/*注册不同文章形式的样式*/

add_action('template_include', 'load_single_template');
function load_single_template($template) {
  $new_template = '';
  // single post template   
  if( is_single() ) {
    global $post;
    // template for post with video format   
    if ( has_post_format( 'video' )) {
      // use template file single-video.php for video format   
      $new_template = locate_template(array('single-video.php' ));
    }
  }
  return ('' != $new_template) ? $new_template : $template;
}

解释:这段代码的意思是，视频形式的文章内容模板使用single-video.php这个文件的。因此需要将single.php复制重命名为single-video.php，然后做简单的修改。我这边就是把meta-media的div改为iframe，实际更改文件的位置是在single-video.php引用的content-single-video.php文件中（我也不知道为什么这样弄，因为主题开发者设计的是这样的single.php引用的实际内容在其他文件中）
3. 创建single-video.php和content-single-video.php文件并上传，更改方法如第二步的解释
目前为止文章内容更改完毕了。测试了一下，显示是没有问题的。
4. 修改列表循环文件loop.php
将loop.php下的原先的代码

    <?php while ( have_posts() ) : the_post(); ?>


        <?php get_template_part( 'sections/content'; ?>

    <?php endwhile; ?>

更改为：

    <?php while ( have_posts() ) : the_post(); ?>


        <?php get_template_part( 'sections/content', get_post_format() ); ?>

    <?php endwhile; ?>

解释：这样更改是支持列表循环各自用不一样的模板，如果没有会默认使用content.php模板。
5. 复制content.php文件并重命名为content-video.php
对content-video.php里面的代码进行相应的修改，其实就是将DIV meta-media 更改为iframe

这样就完全解决了！但是不同的主题结构还是有点不一样的，但原理是差不多的，对于不懂的人摸索起来很费时间，我就花费了很长时间，搜索和研究。不知道有没有自适应其他更好的办法，有的话欢迎留言告诉我哦