如果我们将一些网站的视频以iframe的形式直接贴在WordPress的博客或者网站当中的话,视频在页面的尺寸会非常的小,很不利于我们的观看。所以就想个办法将这个功能完善一下。
好了,不多说,直接上代码,记得将分享地址的代码简单修改一下。
<div class="smartideo">
<div class="player"><iframe src="//player.bilibili.com/player.html?aid=53452583&cid=93503857&page=1" width="100%" height="100%" frameborder="no" scrolling="no" allowfullscreen="allowfullscreen"> </iframe></div>
</div>
这里是需要给div定义类名,方便在css当中给视频定义样式。
最重要的一部分来了,定义视频的样式。
.smartideo { z-index: 0; text-align: center; background: #CCC; line-height: 0; text-indent: 0; }
.smartideo embed, .smartideo iframe { padding: 0; margin: 0; }
.smartideo .player { width: 100%; height: 500px; overflow: hidden; position: relative; }
.smartideo .player a.smartideo-play-link { display: block; width: 50px; height: 50px; text-decoration: none; border: 0; position: absolute; left: 50%; top: 50%; margin: -25px; }
.smartideo .player a.smartideo-play-link p { display: none; }
.smartideo .player .smartideo-play-button { width: 0; height: 0; border-top: 25px solid transparent; border-left: 50px solid #FFF; border-bottom: 25px solid transparent; }
.smartideo .tips { background: #f2f2f2; text-align: center; max-height: 32px; line-height: 32px; font-size: 12px; }
.smartideo .tips a { text-decoration: none; }
@media screen and (max-width:959px){
.smartideo .player { height: 450px; }
}
@media screen and (max-width:767px){
.smartideo .player { height: 400px; }
}
@media screen and (max-width:639px){
.smartideo .player { height: 350px; }
}
@media screen and (max-width:479px){
.smartideo .player { height: 250px; }
}
好了,刷新的试试吧。
© 版权声明
这些信息可能会帮助到你: 下载帮助 | 免责说明 | 进站必看 | 广告投放
版权声明:本文采用知识共享 署名4.0国际许可协议 BY-NC-SA 4.0 进行授权文章名称:《WordPress文章中插入视频自适应页面大小代码》
文章链接:https://www.jsksky.com/insert-video-adaptation-page-into-wordpress-article.html
免责声明:根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,部分软件收费或网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。
THE END
请登录后发表评论
注册
社交帐号登录