优酷分享html代码,优酷视频自适应移动版网页方案

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

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

视频网页与SEO的思考

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

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

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

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

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

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

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

这是刚才拷贝的代码：

这是修改之后的代码：

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

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

vd = document.getElementById("youku");

if (vd != null) {

vd.style.height = vd.scrollWidth*0.8+"px";

}

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

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

方案测试

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

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

链接2：https://www.maixj.net/b35/huangguanzhong-haikuotiankong-7365

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

优酷分享html代码,优酷视频自适应移动版网页方案相关推荐

MYSQL企业常见架构与调优经验分享-高俊峰-专题视频课程
MYSQL企业常见架构与调优经验分享-8967人已学习课程介绍爱维Linux独家发行,从MYSQL系统安装.配置入手,从多个方面深入介绍MYSQL的使用技巧和调优策略,大限度发挥M ...
php直播接口代码,网易云视频直播php版api
跳至 [1] [全屏预览]AppKey = $AppKey; $this->AppSecret = $AppSecret; } /**生成验证码**/ public function check ...
优酷html代码手机不支持,使用 iframe 引用优酷和土豆和腾讯视频，支持 HTML5 手机播放...
写博客,只为记录项目中碰到的问题使用百度视频上传,嵌入远程链接,然后在编辑器中自动转换为支持视频播放的html代码. 例如: 简单了修改了百度编辑器源码默认的百度编辑器针对视频的处理有2种: 1. ...
优酷上的cocos2d-x的演示视频
优酷上居然有这些演示视频,背景音乐很不错. http://v.youku.com/v_playlist/f5000092o1p0.html
优酷盗播引版权方围攻视频大佬陷孤军奋战困局
处于侵权盗播风波中的优酷网,似乎提前迎来了它的"2012". 在2011年的岁末,优酷网不但陷入与土豆网展开的史上最大规模维权行动中,还遭遇乐视网.日本东京电视台等其他对手发难,陷 ...
如何下载优酷土豆、新浪等视频网站视频
今天第一次写博客,没啥为大家共享的,就介绍一款下载优酷土豆.新浪等视频网站的软件. 大家都知道,下载优酷土豆.新浪上的一些视频,通常都要求你注册账号,还要下载个专门的视频下载软件,显得非常繁琐.并且有 ...
平台活动免费送，免费领取1个月优酷/爱奇艺/腾讯视频会员
免费领取1个月优酷/爱奇艺/腾讯视频会员,视频会员免费撸活动. 1.手机应用商店搜索下载"喵惠"APP: 2.喵惠APP上点击进入"淘特1分购",完成1分购包邮 ...
苹果手机怎么取消优酷自动续费_优酷VIP会员：优酷怎么取消自动续费
优酷怎么取消自动续费,优酷会员充值中心,优酷公众号,优酷vip会员,优酷会员,优酷VIP会员,优酷会员卡免费领取,优酷会员充值,优酷视频vip,优酷会员免费领取,优酷会员充值中心,优酷会员兑换码,为方 ...
优Tech分享｜YouTube推荐系统算法梳理
作者简介张皓:腾讯优图实验室研究员,研究方向为视频理解与推荐.南京大学计算机系机器学习与数据挖掘所(LAMDA)硕士. YouTube 创建于 2005 年,用于让用户寻找和发布视频.近年来,You ...

优酷分享html代码,优酷视频自适应移动版网页方案

优酷分享html代码,优酷视频自适应移动版网页方案相关推荐

最新文章

热门文章