相信很多草根站长都有视频的功能吧~
同样,我的网站也有视频。我的视频是放到优酷上面的,使用iframe的方式引用。但是复制下来的代码不尽如人意,移动端自适应没有那么理想。我的目标就是让这个iframe能够再各个端都能以16:9的宽高进行展示。网上也搜了很多方法,但是都不是很理想。最后还是只能拿出珍藏已久的jQuery大法了。
首先要给你的iframe外层嵌套自适应框架的,我使用的是layui
下面就是关键的js代码了;
//计算视频窗口的高度 自适应各端 var w = $("#playerBox").width(); var h = w*9/16; $("#playerBox").height(h);
这样就达到了动态赋值计算iframe的高度了。效果还可以的哦。
内容出处:,
声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/procedure/17245.html
相关推荐
-
支付宝支付前后端实现Vue+Spring Boot
本文主要总结基于Vue/Spring Boot的支付宝支付实现,兼容H5与电脑端。 1. 应用创建与配置 第一步:登录支付宝开放平台创建应用; 并视情况需要添加“手机网站支付”和“…
-
WordPress文章列表 添加文章内图片数量展示
对于一些图片的WP站来说在文章列表上可以展示文章内数量的功能还是非常不错的设计,小编也刚刚从君子不器上看到实现方法,所以小编果断转给大家来看看! WordPress纯代码:获取Wo…
-
VvvebJs–使用开源的JavaScript网站可视化构建库拖拽生成网页
介绍 VvvebJs是一个开源的网页拖拽自动生成的JavaScript库,你可以以简单拖拽的方式生成自己需要的网页样式,内置jquery和Bootstrap,你可以拖拽相关的组件进…
-
解决 wordpress 发布时间显示提前8小时的办法
刚刚发了一篇文章,瞅了一眼,时间显示是8小时前,什么鬼?我穿越到过去了?以前就遇到过了,不过一直懒得处理,今天就处理下吧,顺便记录下。 第一检查了仪表盘 – 设置 -常规,时区设置…
-
PHP Curl的简单使用方法
本文写给刚入PHP坑不久的新手们,作为工具文档,方便用时查阅。 CURL是一个非常强大的开源库,它支持很多种协议,例如,HTTP、HTTPS、FTP、TELENT等。日常开发中,我…
-
用Fikker自建CDN-支持Https 页面缓存 实时监控 流量统计 防CC攻击
免费资源部落相信每个站点肯定都是知道的,在做网站的初始在它上面有非常多的信息都会对每个站长给予极大的帮助!但是可能一些站长还不知道免费资源部落其实已经卖了,原站长从新新开了一个博客…
-
SpringBoot集成Mybatis-Plus代码生成工具
前言 Mybatis-Plus(简称MP)是一个 Mybatis 的增强工具,在 Mybatis 的基础上只做增强不做改变,为简化开发、提高效率而生。这是官方给的定义,关于myba…
-
基于ThinkJS的WebSocket通信详解
本文介绍了如何在ThinkJS的项目中利用 WebSocket 实现多端的实时通信。ThinkJS是360前端团队奇舞团基于Koa 2 开发的企业级 Node.js 服务端框架,文…
-
H5页面一键唤醒App并直达指定页面
在这个流量为王的互联网背景下,移动端的H5页面显然在导流上承担着重要作用,在H5页面上,我们对引流的需求有两种: 一是引导已下载用户从H5页面唤醒App并直达指定场景 二是引导未下…
-
基于Nodejs打造Web架构中间层
前言 Node.js自2009年诞生以来,发展速度相当惊人,目前各种开发框架层出不穷,国内外各大公司都在使用,如国内的阿里的淘宝、天猫、阿里云、蚂蚁金服,腾讯视频、携程、百度、网易…