中电云集是国内领先的云服务器、虚拟主机、服务器租用提供商




上一主题下一主题
«123»Pages: 1/3     Go
主题 : 齐博HTML5+CSS3,视频自响应教程!
个性签名:清远网站建设 www.0763wl.com
UID: 238056
级别: 齐博初中生
发帖: 216
威望: 64 点
积分: 322 个
铜板: 0
精华风格度: 0 点
在线时间: 369 小时
注册时间: 2010-09-26
最后登录: 2018-08-31
楼主  发表于: 2015-08-30 15:27

齐博HTML5+CSS3,视频自响应教程!

研究几天所得!兼容IE7以上所有IE和手机和平板

楼下有朋友问!说要改哪里!(我写了这些,如果还解决不了问题,我也无能为力了!)

一、我改了player.js文件! 这个直接应用到视频!

二、视频网站通用代码的!我应用的是字段!在八楼地址:http://bbs.qibosoft.com/read.php?tid=430867#1962675


下面代码,添加到你的css里:

引用

/* 响应式图片 */
img {
max-width: 100%;
height: auto;
width: auto\9
}
/* 响应式视频 */
.video embed,.video object,.video iframe {
width: 100%;
height: auto
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto
}
.embed-container iframe,.embed-container object,.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}



插入视频的代码:

本部分设定了隐藏,您已回复过了,以下是隐藏的内容

     1、因为是响应式设计,所以插入视频时要注意统一格式代码。在手机分辨率下视频是自适应宽高的,如果不统一代码就不起作用。
代码如下<这代码可以修改player.js文件>:



    <div class="embed-container"><iframe height="498" width="510" src="http://player.youku.com/embed/XNzE5ODE5NjA0" frameborder="0" allowfullscreen=""></iframe></div>

2、视频自适应主要是加
<div class="embed-container"> </div>一句。 其中的视频地址主要是插入视频网站的“通用代码 ”。



演示图:



[ 此帖被承影在2015-09-07 16:32重新编辑 ]
*****************************************
*       签名档欠费,点击续费!          *
*****************************************
个性签名:清远网站建设 www.0763wl.com
UID: 238056
级别: 齐博初中生
发帖: 216
威望: 64 点
积分: 322 个
铜板: 0
精华风格度: 0 点
在线时间: 369 小时
注册时间: 2010-09-26
最后登录: 2018-08-31
沙发  发表于: 2015-08-30 16:03

第一次发教程!自己坐沙发!
*****************************************
*       签名档欠费,点击续费!          *
*****************************************
个性签名:PuTiShu.Wang

UID: 273285
级别: 齐博版主
发帖: 4298
威望: 138 点
积分: 53383 个
铜板: 347
精华风格度: 0 点
在线时间: 7751 小时
注册时间: 2012-08-27
最后登录: 2018-09-18
板凳  发表于: 2015-08-30 17:07

引用

齐博CMS,最好用的建站系统
→模板制作、网站修改。
Admin建站之家 https://putishu.wang
联系QQ:510999429 电话:15559901987

UID: 121110
级别: 齐博硕士
发帖: 4821
威望: 4168 点
积分: 62 个
铜板: 171
精华风格度: 0 点
在线时间: 5200 小时
注册时间: 2008-04-13
最后登录: 2018-06-07
3楼  发表于: 2015-08-30 19:21

看看
*****************************************
*       签名档欠费,点击续费!          *
*****************************************
个性签名:铁道兵家园 http://www.tdbjy.co
UID: 100072
级别: 齐博大专生
发帖: 888
威望: 5537 点
积分: 103566185 个
铜板: 40
精华风格度: 0 点
在线时间: 5349 小时
注册时间: 2007-08-07
最后登录: 2018-08-01
4楼  发表于: 2015-08-31 14:35

    
*****************************************
*       签名档欠费,点击续费!          *
*****************************************
UID: 139277
级别: 齐博高中生
发帖: 765
威望: 805 点
积分: 83 个
铜板: 2
精华风格度: 0 点
在线时间: 1750 小时
注册时间: 2008-11-04
最后登录: 2018-09-15
5楼  发表于: 2015-08-31 15:09

这个必须支持~~
UID: 92654
级别: 齐博高中生
发帖: 680
威望: 649 点
积分: 394 个
铜板: 24
精华风格度: 0 点
在线时间: 889 小时
注册时间: 2007-05-09
最后登录: 2018-09-10
6楼  发表于: 2015-09-06 09:35

修改哪个文件?
*****************************************
*       签名档欠费,点击续费!          *
*****************************************
个性签名:爱片片美图www.wlmqapp.com
UID: 283778
级别: 齐博初中生
发帖: 270
威望: 306 点
积分: 5 个
铜板: 0
精华风格度: 0 点
在线时间: 154 小时
注册时间: 2013-12-23
最后登录: 2018-06-03
7楼  发表于: 2015-09-07 16:06

好东西要感谢楼主
*****************************************
*       签名档欠费,点击续费!          *
*****************************************
个性签名:清远网站建设 www.0763wl.com
UID: 238056
级别: 齐博初中生
发帖: 216
威望: 64 点
积分: 322 个
铜板: 0
精华风格度: 0 点
在线时间: 369 小时
注册时间: 2010-09-26
最后登录: 2018-08-31
8楼  发表于: 2015-09-07 16:19

图片:
引用
引用第6楼liyong5172于2015-09-06 09:35发表的 :
修改哪个文件?

我的视频通用代码自响应!使用的是字段_可视化编辑器!(上图视频预览位置)可作参考!
还有系统要开通iframe框架
[ 此帖被承影在2015-09-07 16:37重新编辑 ]
*****************************************
*       签名档欠费,点击续费!          *
*****************************************
UID: 284166
级别: 齐博初中生
发帖: 342
威望: 309 点
积分: 611 个
铜板: 6
精华风格度: 0 点
在线时间: 249 小时
注册时间: 2014-01-20
最后登录: 2018-05-07
9楼  发表于: 2015-09-07 20:37

  
UID: 284166
级别: 齐博初中生
发帖: 342
威望: 309 点
积分: 611 个
铜板: 6
精华风格度: 0 点
在线时间: 249 小时
注册时间: 2014-01-20
最后登录: 2018-05-07
10楼  发表于: 2015-09-07 20:40

不明白怎么改法?
UID: 144289
级别: 齐博初中生
发帖: 342
威望: 319 点
积分: 26 个
铜板: 0
精华风格度: 0 点
在线时间: 325 小时
注册时间: 2008-12-18
最后登录: 2018-08-09
11楼  发表于: 2015-09-13 17:08

回 楼主(承影) 的帖子

牛气的,我收了
*****************************************
*       签名档欠费,点击续费!          *
*****************************************
个性签名:STLAAA.COM
UID: 288001
级别: 齐博初中生
发帖: 258
威望: 47 点
积分: 648 个
铜板: 0
精华风格度: 0 点
在线时间: 328 小时
注册时间: 2015-01-27
最后登录: 2018-06-26
12楼  发表于: 2015-09-29 01:39

*****************************************
*       签名档欠费,点击续费!          *
*****************************************
UID: 162724
级别: 齐博小学生
发帖: 197
威望: 181 点
积分: 52 个
铜板: 0
精华风格度: 0 点
在线时间: 240 小时
注册时间: 2009-04-25
最后登录: 2016-07-27
13楼  发表于: 2015-10-15 03:12

回 楼主(承影) 的帖子

看看
UID: 283712
级别: 齐博幼儿
发帖: 53
威望: 53 点
积分: 56 个
铜板: 0
精华风格度: 0 点
在线时间: 57 小时
注册时间: 2013-12-17
最后登录: 2018-08-17
14楼  发表于: 2015-11-02 22:27

支持
UID: 175884
级别: 齐博幼儿
发帖: 79
威望: 95 点
积分: 61 个
铜板: 0
精华风格度: 0 点
在线时间: 263 小时
注册时间: 2009-07-18
最后登录: 2018-05-10
15楼  发表于: 2016-02-23 14:04

bucuo
UID: 175884
级别: 齐博幼儿
发帖: 79
威望: 95 点
积分: 61 个
铜板: 0
精华风格度: 0 点
在线时间: 263 小时
注册时间: 2009-07-18
最后登录: 2018-05-10
16楼  发表于: 2016-02-23 14:05

bucuo
UID: 289221
级别: 齐博新生
发帖: 1
威望: 1 点
积分: 2 个
铜板: 0
精华风格度: 0 点
在线时间: 0 小时
注册时间: 2015-08-21
最后登录: 2016-02-23
17楼  发表于: 2016-02-23 14:49

齐博系统怎么样?有谁用过的?
UID: 265664
级别: 齐博小学生
发帖: 122
威望: 120 点
积分: 209 个
铜板: 0
精华风格度: 0 点
在线时间: 170 小时
注册时间: 2012-02-10
最后登录: 2017-09-27
18楼  发表于: 2016-02-28 15:40

    
UID: 284308
级别: 齐博新生
发帖: 19
威望: 19 点
积分: 21 个
铜板: 0
精华风格度: 0 点
在线时间: 12 小时
注册时间: 2014-02-08
最后登录: 2018-04-14
19楼  发表于: 2016-02-28 21:47

回 1楼(承影) 的帖子

看一下
«123»Pages: 1/3     Go
齐博软件技术交流区 » 模块插件
以铜板换广告位一 以铜板换广告位二 以铜板换广告位三 以铜板换广告位四
以铜板换广告位五 以铜板换广告位六 以铜板换广告位七 以铜板换广告位八
以铜板换广告位九 以铜板换广告位十 以铜板换广告位十一 以铜板换广告位十二
打造最专业的门户系统建站程序