好的,所以我尝试使用Fancybox在点击图片横幅时显示一个包含视频的iframe。经过各种尝试并经历了大量的文档记录,到目前为止我唯一能做的就是让自己哭泣。在点击图像的那一刻,你将拍摄到fluvid.html并且视频全屏显示。我在想我需要另外关注我的代码。我在这里缺少什么?
在标题中:
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 640,
maxHeight : 360,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : true,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
图片代码:
<div class="flubanner"><a class="various" data-fancybox-type="iframe" href="fluvid.html"><img src="images/flubanner.png" height="200px" width="980px"/></a></div>
fluvid.html
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video id="fluvid" class="video-js" width="640px" height="360px" controls="controls" preload="auto" autoplay poster="images/image.jpg">
<source src="images/fluvid.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="images/image.jpg" width="640" height="360" alt="Poster Image"
title="No video playback capabilities." />
</video>