FancyBox响应式Youtube演示：

Question

我们的网站同时使用fancybox（/ media）和fullPage.js。当我尝试替换网站上的video时，它会破坏两者。此外，当我更新视频或图像时，它会破坏网站上的JS。

但是，在本地测试或Fiddle（第83行）

上工作正常

<div class="slide broadcast">
    <section class="intro creativetop">We can communicate your message across any medium: <br>Broadcast Media such as TV. . .</section>
    <div class=ccontent>
        <ul>
            <li>
                <a class="fancybox-media" href="http://www.youtube.com/watch?v=l5SCbkuz5Dc" title="Helm Paint and Supply">
                    <img src="http://img.youtube.com/vi/l5SCbkuz5Dc/0.jpg" height="150" width="250">
                </a>
            </li>
            <li>
                <a class="fancybox-media" href="http://www.youtube.com/watch?v=MvBnMjbsA7E" title="Chag's Fishing">
                    <img src="http://img.youtube.com/vi/MvBnMjbsA7E/0.jpg" height="150" width="250">
                </a>
            </li>
            <li>
                <a class="fancybox-media" href="https://www.youtube.com/watch?v=hP3JKEPiMQQ" title="Campbell Cabinets">
                    <img src="https://i.ytimg.com/vi/hP3JKEPiMQQ/3.jpg?time=1406563337365" height="150" width="250">
                </a>
            </li>
        </ul>
    </div>
    <div class=ccontent>
        <ul>
            <li>
                <a class="fancybox-media" href="http://www.youtube.com/watch?v=xz8MBIobbPI" title="Hickory Small Animal Hospital">
                    <img src="https://i1.ytimg.com/vi/xz8MBIobbPI/3.jpg?time=1401724792643" height="150" width="250">
                </a>
            </li>
            <li>
                <a class="fancybox-media" href="http://www.youtube.com/watch?v=QuHQ0HCQlKQ" title="Chag's Archery">
                    <img src="http://img.youtube.com/vi/QuHQ0HCQlKQ/0.jpg" height="150" width="250">
                </a>
            </li>
            <li>
                <a class="fancybox-media" href="http://www.youtube.com/watch?v=aMEebTZfE-k" title="Jefferson Feed">
                    <img src="https://i1.ytimg.com/vi/aMEebTZfE-k/2.jpg?time=1402693795205" height="150" width="250">
                </a>
            </li>
        </ul>
    </div>

发生了什么？

Answer 1

查看this link;在其中，它表示您需要在后端运行“FancyBox”以显示来自Youtube，Vimeo，Metacafe，Dailymotion，Twitvid，Twitpic或Instagram的媒体。

我认为这是由于浏览器限制了来自Javascript的iframe访问，因此FancyBox可能会抓取后端上的内容并构建一个自定义框架，然后将其发送到前端以绕过此约束。（只是一个理论，我可能是错的。）

FancyBox响应式Youtube演示：

<iframe src="http://webdesignandsuch.com/posts/fancybox-download/responsive-youtube-videos/fancybox-youtube.html" style="width:100%;height:100%;display:block;position:fixed;"></iframe>

如果您想逐步说明如何构建这样的响应Youtube播放器那么请查看this tutorial on "Responsive Youtube Videos with FancyBox" （这不是一个教程，但他至少给了你一个一些很好的例子以及一些可以使用的代码。）

另外，请查看由遇到类似困难的用户发布的this StackOverFlow post。

Answer 2

取决于您的用户的使用情况＆＃39;浏览器处理模板中的问题，可能是由于格式错误的HTML。您应该将类声明为字符串：换句话说，class=ccontent应该变为class="ccontent"。我想你也错过了一个结束的div。

您可以使用http://www.dirtymarkup.com/来捕获其中一些错误。

清理完模板后，请运行http://fancyapps.com/fancybox/上的说明，并确保在页面上加载以下依赖项：

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

最后，将Fancybox附加到您的class="fancybox-media"元素：

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox-media").fancybox();
    });
</script>

新的Youtube链接打破网站

2 个答案:

FancyBox响应式Youtube演示：