<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Jose Francisco Diaz / picssel.com" />
<title>html弹出视频</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" />
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/jwplayer.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<style type="text/css">
a {outline: 0 none; text-decoration: none;}
a img {border: 0 none;}
#wrap { width: 800px; margin: 20px auto; font-family: arial, sans-serif; font-size: 14px;}
</style>
<script>
/* <![CDATA[ */
$(document).ready(function () {
$(".fancybox").fancybox({
fitToView: false,
content: '<span></span>', // create temp content
scrolling: 'no',
afterLoad: function () {
var $width = $(this.element).data('width'); // get dimensions from data attributes
var $height = $(this.element).data('height');
this.content = "<embed src='player.swf?file=" + this.href + "&autostart=true&wmode=opaque' type='application/x-shockwave-flash' width='" + $width + "' height='" + $height + "'></embed>"; // replace temp content
}
});
}); // ready
/* ]]> */
</script>
</head>
<body>
<div id="wrap">
<a class="fancybox" href="video.mp4" data-width="640" data-height="360"><img src="player.jpg" width="380" height="254"></a>
</div><!--wrap-->
</body>
</html>
使用jQuery插件FancyBox轻松实现弹窗视频
4星 · 超过85%的资源 需积分: 50 141 浏览量
2017-10-09
10:52:15
上传
评论
收藏 518KB RAR 举报 
video.rar （15个子文件） 
video images fancyBox 
fancybox_overlay.png 1003B
blank.gif 43B fancybox_loading.gif 6KB fancybox_sprite.png 1KB fancybox_loading@2x.gif 14KB fancybox_sprite@2x.png 6KB js 
jquery.fancybox.js 47KB jwplayer.js 152KB jquery.js 260KB jwplayer.html5.js 132KB
player.swf 111KB css jquery.fancybox.css 4KB
video.mp4 191KB
player.jpg 30KB
demo.html 1KB资源评论
Changing20162019-06-12不错，谢谢分享！
