WordPress 视频自适应代码

前端 585
1年前
以 iframe 方式引用视频网站的视频,在 pc 端和手机端都能完美显示视频

// wordpress后台 HTML 编辑器添加自定义快捷标签按钮
 add_action('after_wp_tiny_mce', 'lxtx_bolo_after_wp_tiny_mce');
 function lxtx_bolo_after_wp_tiny_mce($mce_settings) {
    ?>
    <script type="text/javascript">    
    QTags.addButton( 'youkushipinjm', '视频', 
    '<p class="wa-video"><iframe src="视频地址" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>n', "" );  
 
    </script>
    <?php 
}

/*视频自适应代码*/
.wa-video {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
}
.wa-video iframe,.wa-video object,.wa-video embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
标签: ,

相关文章

WordPress 自动为新文章添加已使用过的历史标签非插件版

每当我们写文章的时候,都需要手动给 WordPress 文章添加标签,这样既能给访问者明确这篇文章的…

523
6个月前
评论神器一键自动填写昵称、邮箱和网址

适用WordPress、Typecho、ZBlog、Emlog、多说等平台的评论神器 javascr…

507
7个月前
WordPress 利用sql命令批量修改友情链接全部在新窗口打开

登陆数据库,然后执行 sql 命令: UPDATE Wp_links SET link_target…

329
7个月前

共有0条评论

评论本文