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;
}
  1. 调用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;
}
  1. 在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

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

关于作者

杰夫(jerfo0)

杰夫(jerfo0)

一个活的真实,耿直的boy。
坚定相信爱情,向往自由,对世界充满好奇心。热爱美剧、海贼王、一切户外运动、旅行...
职业:互联网运营。
生命不息,折腾不止,燥起来!!

查看全部帖子

1 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注