全方位站长技能、SEO优化学习平台
当前位置:网站首页 > Zblog百科 > 正文

zblog使用iframe框架插入优酷等视频,手机端自适应宽度方法

作者:admin发布时间:2023-09-10分类:Zblog百科浏览:216评论:0


导读:在使用ZblogPHP模板插入优酷等第三方视频时,一般会使用iframe或embed框。然而,目前优酷、爱奇艺等视频分享代码中都包含宽高限制,导致在PC端内容区宽度足够时可以正常显示,但在手机移动端访问时会出现视频显示不全、过大等问题。下面分享一个解决优酷视频自适应问题的方法:<iframe src="http://player.youku.com/embed/XMjc2Mjg1NDU4OA==" frameborder="0"&
温馨提示:手机扫码可阅读当前文章!
文章简介:在使用ZblogPHP模板插入优酷等第三方视频时,一般会使用iframe或embed框。然而,目前优酷、爱奇艺等视频分享代码中都包含宽高限制,导致在PC端内容区...

在使用ZblogPHP模板插入优酷等第三方视频时,一般会使用iframe或embed框。然而,目前优酷、爱奇艺等视频分享代码中都包含宽高限制,导致在PC端内容区宽度足够时可以正常显示,但在手机移动端访问时会出现视频显示不全、过大等问题。


zblog使用iframe框架插入优酷等视频,手机端自适应宽度方法

下面分享一个解决优酷视频自适应问题的方法:


<iframe src="http://player.youku.com/embed/XMjc2Mjg1NDU4OA==" frameborder="0" allowfullscreen></iframe>


在代码中一般会包含宽度和高度。


方法一:每次插入视频代码时,都手动删除其中的width和height属性,并通过CSS来定义iframe的宽度和高度,包括在手机端的情况下。


这种方法需要每次手动删除宽度和高度属性,可以使用,但不如方法二方便。


方法二:通过jQuery移除width和height属性,使其自适应。


// 移除宽度和高度属性
$('iframe').removeAttr('width').removeAttr('height');


使用以上方法可以解决优酷视频在移动端显示不全的问题。


/视频自适应
    function video_ok(){
        $('.article-content embed, .article-content video, .article-content iframe').each(function(){
            var w = $(this).attr('width'),
                h = $(this).attr('height')
            if( h ){
                $(this).css('height', $(this).width()/(w/h))
            }
        })
    }
<style>
.page-view-article-content embed, .page-view-article-content video, .page-view-article-content iframe{width: 510px;height: 498px;}/*PC上正常显示宽度*/
@media screen and (max-width:980px){ /*宽度低于980px时候执行*/
.page-view-article-content embed, .page-view-article-content video, .page-view-article-content iframe{max-width: 100%;height: 200px;}/*宽度低于980px时候,iframe宽度100%,高度200px*/
}
</style>



欢迎 发表评论:

  • 请填写验证码
Zblog百科排行
    随机文章 | 热门文章 | 热评文章
随机文章