关于小悟志网站地图归档友情链接联系Feed

云上小悟 + 

首页 » 网站建设 »

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

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

拍拍贷

文章《优酷视频自适应移动版网页方案》的特色图片

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

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

视频网页与SEO的思考

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

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

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

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

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

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

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

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

这是刚才拷贝的代码:

<iframe height=498 width=510 src="http://player.youku.com/embed/XMTM2MjMzNzA3Ng==" frameborder=0 allowfullscreen></iframe>

 

这是修改之后的代码:

<div style="text-align:center;">
<iframe id="youku" style="width:96%" height=498 width=510 src="http://player.youku.com/embed/XMTM2MjMzNzA3Ng==" frameborder=0 allowfullscreen></iframe>
</div>

 

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

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

<script>
vd = document.getElementById("youku");
if (vd != null) {
    vd.style.height = vd.scrollWidth*0.8+"px";
}
</script>

 

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

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

 

方案测试

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

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

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

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

本文链接:http://www.maixj.net/wz/youku-zishiying-9115
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

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

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.


前一篇:
后一篇:

栏目精选


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

网站二维码
拍拍贷
go to top