通过a标签在页面上显示视频网站中的视频
1、把视频传到优酷、腾讯等视频网站中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
.video .mask{
display:none;
}
.video{
width:100%;
position:relative;
}
.cc{
width:60px;
height:30px;
background:red;
z-index:999;
position:absolute;
left:736px;
top:10px;;
} </style>
</head>
<body>
<div class="video">
<iframe src="2.html" style="width:800px;height:520px" class="c21"></iframe>
<div class="cc"></div> </div>
</body>
<script src="jquery.js"></script>
<script>
$(".video").hover(function(){
$(".video-btn").css("display","none");
$(".mask").css("display","block")
},function(){
$(".video-btn").css("display","block");
$(".mask").css("display","none")
})
$(".cc").on("click",function(){
$(".c21").attr("src","2.html")
})
</script>
</html>
主页
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.video-btn,.mask{
position:absolute;
top:50%;
left:50%;
margin-top:-75px;
margin-left:-75px;
}
.video-bg{
width:100%;
}
</style>
</head>
<body>
<a href="http://v.qq.com/iframe/player.html?vid=u0133b4ownh&auto=1&tiny=0" data-lightbox-type="iframe" class="open-video cbp-lightbox">
<img class="video-btn" src="video_play.png">
<img class="mask" alt="" src="video_play_hover.png">
<img src= "service_banner.png" class="video-bg"/>
</a>
</body>
</html>
iframe页
2、在主页中添加一个iframe标签，并设置好宽高，然后弄个div定位在iframe的右上角（用来作为关闭iframe的按钮）
3、把视频路径放到iframe页面中的a标签。然后在a标签中添加默认的背景图等。
通过a标签在页面上显示视频网站中的视频的更多相关文章
- append、appendTo、prepend、prependTo、before、insertBefore、after、insertAfter、replaceAll方法被调用后，原本在页面上显示的元素会消失
详细描述: $ele.append..appendTo..prepend..prependTo..before..insertBefore..after..insertAfter..replaceAl ...
- HTML <base> 标签 为页面上的所有链接规定默认地址或默认目标
定义和用法 <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base& ...
- mvc在页面上显示PDF
今天看到需求要在页面上显示pdf,自己整了半天,啥效果都没有,偶尔有效果还各种不兼容,很无语的说.捣鼓了半天,没办法了,去谷歌了下,介绍了各种插件,各种方法,但是都挺繁琐的,本人不是一个很喜欢使用插件 ...
- easyui页面上显示和PL/SQL编码问题
在页面上,只需要显示人们看的懂的文字就行,但是在数据库里面就不一定了,一般情况下,在数据库里面存字母,数字等除了汉字以外的字符,存汉字有个问题,就是有时候不同oracle数据库的客户端会出现乱码问题: ...
- Django学习路7_注册app到能够在页面上显示app网页内容
在根目录下创建一个 app3 app3 是新 app 的名字 创建一个 urls.py 在 urls.py 中添加 urlpatterns 列表 容纳需要显示在页面上的函数 from django.c ...
- Python+Tornado+Tampermonkey 获取某讯等主流视频网站的会员视频解析播放
近期,<哪吒之魔童降世>在各大视频软件可以看了,然而却是一贯的套路,非会员谢绝观看!!!只能从国内那些五花八门的视频网站上找着看了,或者通过之前本人说的 Chrome 的油猴插件,传送门 ...
- <body>标签，网页上显示的内容放在这里
在网页上要展示出来的页面内容一定要放在body标签中.如下图是一个新闻文章的网页. 在浏览器中的显示效果: 示例: <!DOCTYPE HTML> <html> <hea ...
- 网络应用发布到linux上的web服务器上页面上显示麻将牌式字符的问题
什么是麻将牌式字符,就是中文显示为一个竖立长方形框框里面有四个数字或字母,请看下图中中文,日文和韩文的显示就知道了: 为什么会遇到这个问题? 系统不支持中文,日文和韩文字体. 如何解决: 安装中文字体 ...
- C# 输出pdf文件流在页面上显示
1 不调用itextsharp.dll的操作 /// <summary> /// 生成pdf流 /// </summary> /// ...
随机推荐
- Jquery插件Ztree使用所遇问题
问题1.$.fn.zTree为空或为Undefined 我在MVC中引用Jquery插件Ztree的JS并不存任何问题,而当我将Ztree的js引入项目中,就出现$.fn.zTree为空或为Undef ...
- Web.config配置详解
一.认识Web.config文件 Web.config 文件是一个XML文本文件,它用来储存 ASP.NET Web 应用程序的配置信息(如最常用的设置ASP.NET Web ...
- XML Schema choice 元素
XSD : <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:sch="http://w ...
- Linux_scp
scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...
- GreenDao关系建表
关系 在greenDAO,实体涉及使用一对一或一对多的关系.例如,如果要模拟一个1:greenDAOñ关系,你将有一个一对一和一对多的关系.但是,请注意,一对一和一对多的关系不是相互连接,所以你必须同 ...
- wf（五）
测试工作流: 运用wf(四)的solution: 创建单元测试项目: 1.选择HelloWorkflow解决方案,右键选择添加新建项目:选择单元测试模板,命名为HelloWorkflow.Tests. ...
- [Spark] Hello Spark
这里只使用Spark的Python操作和接口,其他语言应为不熟悉,所以先不写在这里. Spark 部署 可以直接从官方网站下载 pre-build 版本,可以直接在电脑上运行,离线安装也是可以的,比如 ...
- eclipse 用links 安装插件
eclipse 用links 安装插件: 1.在eclipse目录下新建文件夹links 2.在links里新建文件 "控件名".link controlName.link 3.在 ...
- oracle 锁表问题
oracle执行表数据更新的时候,会遇到锁表问题,比方说,会遇到这样的问题,主要原因是这张表被其他人占用,修改数据没有提交.oracle为了避免脏数据的产生,在其安全机制下,锁住该表. 执行如下操作, ...
- Using FreeMarker templates (FTL)- Tutorial
Lars Vogel, (c) 2012, 2016 vogella GmbHVersion 1.4,06.10.2016 Table of Contents 1. Introduction to F ...