新 Youtube Link 网站中断

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 Whosebug post，由遇到类似问题的用户发布。

Answer 2

根据您用户的浏览器处理模板中问题的程度，这可能是由于格式错误 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 Link 网站中断

New Youtube Link breaks site

jquery

fancybox

fullpage.js

FancyBox 响应式 Youtube 演示：