云上小悟
首页   关于   小悟志   栏目   标签   文章   归档   友链   联系

   云上小悟  +  

优酷视频自适应移动版网页方案

网站建设 / by: 麦新杰 / 发布:2015年10月27日 / 321次阅读 / 3条评论
/ 最后修改时间: 2016-03-17 12:49:47

网站建设 / 2015年10月27日 / 321次阅读 /


优酷视频自适应移动版网页方案

在网页中插入视频之后,存在一个问题,就是移动版网页的视频自适应小窗口。

本文用优酷来举例,优酷的每个视频页面,都给我们提供了直接对视频内容进行分享的链接,视频插入网页很容易,但是此网页的移动版在显示视频的时候,视频窗口会超过屏幕尺寸,不能实现视频尺寸的自适应。本文给出一个简单的解决方案。

视频网页与SEO的思考

在网页中插入视频,是很多博友们的一个常规做法,虽然从SEO的角度看,搜索引擎不一定会关心视频内容,但是搜索引擎一定能看得到视频周围的文字介绍(就像图片的ALT属性一样)。如果文字和视频是组合在一起为用户服务,将有助于提升网页内容质量。

传统的SEO总是教导我们说,搜索引擎只能看到文字,图片和视频都是看不到的,这是实话,不过这个实话有个大前提,那就是网页不能全部都是由图片和视频组成,需要有大量的文字,图片和视频只是辅助内容。从UEO的角度分析,能够提升用户体验,就是好的SEO。所以,我们还是有必要研究并解决插入的视频在移动版网页自适应的问题。

优酷视频自适应移动版网页

麦新杰直接开始用优酷视频举例说明。

首先,获取优酷视频的链接,如下图所示,请选择iframe的通用代码:

在优酷视频页面中选择通用代码

在优酷视频页面中选择通用代码

然后将这个代码直接插入网页,插入之后,对代码进行一点小小的改造。

这是刚才拷贝的代码:

 

这是修改之后的代码:

 

对比一下,可以看出,代码的修改很简单。先对整个iframe实现居中,然后给iframe增加一个id,值为youku,同时给iframe一个width属性值,这是一个百分比,表示占用页面的宽度。

最后,我们需要在网页模板中增加一段js代码。这个动作也可以在网页加载的最开始做。对于WordPress网站,这段代码可以增加到footer.php的合适位置,代码如下:

 

这段代码的意思很简单,就是找到id为youku的元素,让后将其高设置为宽的80%。

这样就实现了优酷视频自动版网页的自适应。

 

方案测试

本站有几篇博文里面嵌入和优酷视频内容,请用手机(或者用浏览器模拟手机访问,请参考移动版网页调试技巧)访问下面几个链接,测试此方案的效果。

http://www.maixj.net/misc/wu-liudehua-7694

http://www.maixj.net/before-35/huangguanzhong-haikuotiankong-7365

任何时候,任何尺寸的窗口,优酷视频都能够自适应窗口大小,以5:4的尺寸比例显示出来。

本文固定链接:http://www.maixj.net/wangzhan/youku-zishiying-9115

“优酷视频自适应移动版网页方案”有3条评论

发表评论

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

  • epson维修  says:

    不错的方案 值得学习 操作   [ 回复 ]

  • 三月福利吧  says:

    恩,这个方法不错~~~~   [ 回复 ]

    • 麦新杰  says:

      呵呵,这几乎是最简单的方案了。期待以后视频网站能够自己解决自适应移动版网页的问题。   [ 回复 ]


前一篇:
后一篇:

麦新杰的云上小悟独立博客网站文章内容,除非特别注明,全部都是原创,如需转载,请先阅读版权声明!原创文章更具个性,有些文字虽略显随意,但不影响个人思想表达。部分文章是我自己的笔记,为自己记录,总结和收藏,同时也分享给您!这是本博建设的出发点,希望您喜欢并得到您的支持!喝杯茶,慢慢阅读...

©Copyright 麦新杰 SINCE 2014 云上小悟独立博客版权所有  备案号:苏ICP备14045477号-1  

本站360安全检测  Valid CSS!