Question

这是我想用于画廊的html，以便在弹出时显示框架内的视频：

<ul id="gallery-v">
    <li> <a class='video' href='video from youtube'><img src='img/2.png' alt=''></a></li>
    <li> <a class='video' href='video from youtube'><img src='img/1.png' alt=''></a></li>
</ul>

我想适应html创建一个像图像一样的画廊：

$(window).load(function () {
    // Gallery
    if (jQuery("#gallery-v").length) {
        // Fancybox
        jQuery("#gallery-v li a").fancybox({
            "titleShow": false,
                "transitionIn": "elasti",
                "transitionOut": "elastic",
                "closeBtn": true
        });

        var totalImages = jQuery("#gallery-v > li").length,
            imageWidth = jQuery("#gallery-v > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery("#gallery-video").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth);

        jQuery("#gallery-v").width(totalWidth);

        jQuery("#gallery-prev-v").click(function () {
            if (jQuery("#gallery-v").position().left < 0 && !jQuery("#gallery-v").is(":animated")) {
                jQuery("#gallery-v").animate({
                    left: "+=" + imageWidth + "px"
                });
            }
            return false;
        });

        jQuery("#gallery-next-v").click(function () {
            if (jQuery("#gallery-v").position().left > stopPosition && !jQuery("#gallery-v").is(":animated")) {
                jQuery("#gallery-v").animate({
                    left: "-=" + imageWidth + "px"
                });
            }

        });
        $("a.video").click(function () {
            $.fancybox({

                iframe: {
                    preload: false
                }
                maxWidth: 800,
                maxHeight: 600,
                fitToView: false,
                width: "70%",
                height: "70%",
                autoSize: false,
                closeClick: false,
                openEffect: "elastic",
                closeEffect: "none"

            });
        });
        return false;
    }
});

Answer 1

尝试这样的事情

 <a class="various iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>

Answer 2

在li标签中使用视频标签，以下是您的帮助链接：

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

Fancybox视频弹出窗口没有显示

2 个答案: