Safari Youtube 不在 Fancybox 中答案

【问题标题】：Safari Youtube not centered in FancyboxSafari Youtube 不在 Fancybox 中
【发布时间】：2013-01-22 02:27:54
【问题描述】：

在 www.armstrongvisuals.com/tester.php（卷轴链接）上缩减了测试页面

我的 youtube 视频的 fancybox2 实现仅在 Safari 中显示在 Fancybox 中心之外，并在页面中显示 flexslider 幻灯片。 Fancybox 覆盖窗口的大小和位置都正确，但 youtube 内容在垂直和水平方向上都超出了 fancybox 覆盖范围的一半。 Safari 似乎依赖于不正确的窗口宽度和高度。当您调整窗口大小时，视频会与幻想框分开移动。我在页面中有一个 Flexslider 幻灯片，我知道 Flexslider 存在溢出问题。一直在我的本地服务器上进行故障排除。更新 Flexslider 并没有解决问题。现在，我正在尝试改进fancybox.js 以依赖innerheight 和innerwidth，但希望得到一些帮助。希望这个问题对于了解 Fancybox 的人来说听起来很熟悉。该链接在 chrome、firefox、ie7、ie8、ie9 中测试正常。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>tester</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!--/*css reset*/-->
    <link rel="stylesheet" type="text/css" href="./css/reset.css"/>
<!--/*fancybox*/-->
    <script type="text/javascript" src="./js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="./js/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/jquery.fancybox.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="./css/jquery.fancybox-buttons.css"/>
        <link rel="stylesheet" type="text/css" href="./css/jquery.fancybox-thumbs.css"/>
        <script type="text/javascript" src="./js/jquery.fancybox-thumbs.js"></script>
        <script type="text/javascript" src="./js/jquery.fancybox-media.js"></script>
        <script type="text/javascript" src="./js/jquery.fancyboxGO.js"></script>
<!--/*stylesheets*/-->
    <link rel="stylesheet" type="text/css" href="./css/fonts.css"/>
        <!--[if!IE]><!-->
    <link rel="stylesheet" type="text/css" href="./css/avstyle.css"/>
    <link rel="stylesheet" type="text/css" href="./css/flexslider.css" />
    <!--<![endif]-->
<!--/*javascripts*/-->
    <script type="text/javascript" src="./js/flexslider.js"></script>
    <script type="text/javascript" src="./js/flexsliderGO.js"></script>
</head>
<body>
    <div class="hider">
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-necktest-Bbw.jpg" href="http://www.youtube.com/v/iHrx9wU2t-U" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-necktest-Bmix.jpg" href="http://www.youtube.com/v/aE6t1jERznw" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-broquard.jpg" href="http://www.youtube.com/v/MgQngKUuFS4" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-cleg.jpg" href="http://www.youtube.com/v/A6DyzGStzLE" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-cactoons.jpg" href="http://www.youtube.com/v/BPJBRMEnbGM" title="test title"></a>
    </div>

<a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-reel.jpg" href="http://www.youtube.com/v/oDVTf4g5cj8" title="test title">reel</a>

    <div class="hider">
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-speechtest.jpg" href="http://www.youtube.com/v/5JagAzTMGL0" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-necktest.jpg" href="http://www.youtube.com/v/U-jkKFOdN_Y" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-mugger.jpg" href="http://www.youtube.com/v/cTbe0m3_ZYc" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-necktest-B.jpg" href="http://www.youtube.com/v/49ZMoplNEoM" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-necktest-Bcolor.jpg" href="http://www.youtube.com/v/mTQgA-uItHU" title="test title"></a>
    </div>
<br /><br />

<!--/*slideshow*/-->
<div id="sshow">
    <?php include('includes/slideshow.php'); ?>
</div>
<!--/*end slideshow*/-->


</body>
</html>

【问题讨论】：

你的 jQuery 代码在哪里？
我解决了这个问题。我是新成员，所以我必须等待几个小时才能发布固定代码。我需要将我的 html 切换到 iframe 嵌入标签并从我的 jQuery js 中删除媒体助手。我真的很感谢你的许多回答，JFK，fancybox 正在极大地改进这个网站。谢谢。

标签： safari youtube fancybox width flexslider

【解决方案1】：

想通了。首先，我确定我在 html youtube 超链接中使用了 embed 和 iframe

<div class="hider">
<a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-cactoons.jpg" href="http://www.youtube.com/embed/BPJBRMEnbGM?autoplay=1" title="test title"></a>
</div>

<a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-reel.jpg" href="http://www.youtube.com/embed/oDVTf4g5cj8?autoplay=1" title="test title">reel</a>

<div class="hider">
<a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-necktest-Bcolor.jpg" href="http://www.youtube.com/embed/mTQgA-uItHU?autoplay=1" title="test title"></a>
</div

然后将 "type":"iframe", 添加到我的 js jQuery 调用中，并删除了媒体助手。我使用 jQuery 而不是 $ 因为我在网站上也有一些 mootools kwicks。我还使用缩略图助手并缩放缩略图以适应初始窗口宽度。

jQuery(document).ready(function() {
    jQuery('.fancybox-media').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        prevEffect  : 'none',
        nextEffect  : 'none',
        nextClick   : false,
        "type"      : "iframe",
        helpers     : {
            title : {
                type: 'inside'
            },
            thumbs : {
                width : (window.innerWidth*.09),
                height : (window.innerWidth*.050943396),
                        source  : function(current) {
                            return jQuery(current.element).data('thumbnail');
                        }
            }
        }
    });
});

张贴它以防其他人滑入此裂缝。我的 jQuery 没有显示在我的原始帖子中，因为我在外部引用了我的页面的链接和 php 包含的部分。对于那个很抱歉。感谢 JFK 对fancybox 的支持。

【讨论】：

【解决方案2】：

附录：现在很明显，我在我的 fancybox 组中将 inline 与 iframe 混合使用，在我的页面中使用“fancybox-media”作为这个 fancybox 实例的类会导致问题，破坏我的 html 代码中的 iframe 调用。以下更新的代码与 flexslider 一起使用，并且在 safari 中没有出现故障。（我从一个链接激活了一个fancybox组，其他链接隐藏）：

<div class="hider">
<a class="fancybox" rel="myvidsB" data-thumbnail="/images/thmb-maxscripts.jpg" href="#maxscripter"></a>
</div>
<a class="fancybox fancybox.iframe" rel="myvidsB" data-thumbnail="/images/thmb-reel.jpg" href="http://www.youtube.com/embed/oDVTf4g5cj8?autoplay=1" title="title caption">reelB</a>
<div class="hider">
<a class="fancybox fancybox.iframe" rel="myvidsB" data-thumbnail="images/thmb-cactoons.jpg" href="http://www.youtube.com/embed/BPJBRMEnbGM?autoplay=1" title="title caption"></a>
</div>

使用 jQuery

jQuery(document).ready(function() {
    jQuery('.fancybox').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        prevEffect  : 'none',
        nextEffect  : 'none',
        nextClick   : false,
        arrows  :  true,
        margin  :  [20, 60, 20, 60],
        helpers     : {
            title : {
                type: 'inside'
            },
            thumbs : {
                width : thmbWa,
                height : thmbHa,
                        source  : function(current) {
                            return jQuery(current.element).data('thumbnail');
                        }               
            }
        }
    });
});

其中 thmbWa 和 thmbHa 是其他代码指定的用于缩放缩略图的变量。

【讨论】：