新的 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

根据用户的浏览器处理模板问题的能力，可能是由于 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>