在Firefox / IE上顯示iframe的問題

Question

我在wordpress頁面上有兩個iframe，我希望它根據屏幕分辨率用CSS調整大小。 我想出了如下代碼：

<head>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<nav>
    <div id="menu-stream"><?php wp_nav_menu(array('menu' => 'cssmenu')); ?></div>
</nav>

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div id="infos">
                <?php 
                dynamic_sidebar('info'); 
                dynamic_sidebar('date'); 
                ?>
        </div>
        <div id="rss">
            dynamic_sidebar('rss'); 
        </div>
        <div class="entry">
                <div class="Wrapper">
                    <iframe id="video" name="video_iframe" width="854" height="480" src="http://www.dailymotion.com/embed/video/xxxxx?autoPlay=1" frameborder="0"></iframe>
                    <iframe id="chat" name="chat_iframe" width="380" height="480" src="http://webchat.quakenet.org/?channels=xxxx..." frameborder="0"></iframe>
                </div>
            <?php the_content(); ?>
        </div>

在Chrome或Opera上一切正常，但是當我嘗試使用Firefox或IE時，iframe不會出現。 我可以聽到來自Dailymotion視頻的聲音，但聲音沒有出現。

這是CSS

.entry {
    color: #c5c5c5;
    font-family: Verdana, Arial, Sans-serif;
    font-size: 14px;
    text-align: justify;
    margin-left: 10px;
    margin-right: 12px;
    margin-bottom: 20px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 5px;
    background-color: #1e1e1e;
    letter-spacing: -1px;
    box-shadow:0px 0px 11px black;
}

.Wrapper {

    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.Wrapper iframe {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 70%;
}

.Wrapper#chat {
    width: 30%;
    float: left;
}
.videoWrapper#video {
    width: 70%;
    float: left;
}

我還添加了一些媒體查詢。 我可以看到這有問題：

.Wrapper iframe {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 70%;
}

因為當我刪除寬度和高度時，它會顯示，但是當然不會再調整大小了。 誰能告訴我怎么了？

這是帶有調整大小解決方案的文章，我決定使用http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Answer 1

這是更新的 小提琴

您的問題是您的div#entry沒有任何固定的寬度/高度，因此我添加了一些。

同樣， position:relative對您的框架也很重要。

另一個考慮因素是，我刪除了.Wrapper iframe css，因為由於覆蓋了類.Wrapper#video和.Wrapper#chat而無法存在。

因此，使用以下CSS：

.entry {
    color: #c5c5c5;
    font-family: Verdana, Arial, Sans-serif;
    font-size: 14px;
    text-align: justify;
    margin-left: 10px;
    margin-right: 12px;
    margin-bottom: 20px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 5px;
    background-color: #1e1e1e;
    letter-spacing: -1px;
    box-shadow:0px 0px 11px black;
    width: 1250px;
    height: 500px;
}

.Wrapper {
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

.Wrapper#chat {
    width: 30%;
    float: left;
    margin-right: 3px;
    display: block;
}
.videoWrapper#video {
    width: 70%;
    float: left;
    display: block;
    position:relative;
}

您需要使其流暢，然后，將以下html用於iframe：

<div class="entry">
        <div class="Wrapper">
            <iframe id="video" name="video_iframe" width="79%" height="500px" src="http://www.dailymotion.com/embed/video/xxxxx?autoPlay=1" frameborder="0"></iframe>
            <iframe id="chat" name="chat_iframe" width="20%" height="500px" src="http://webchat.quakenet.org/?channels=xxxx..." frameborder="0"></iframe>
        </div>
</div>

請注意，我為幀使用了百分比寬度，少了1％，以避免出現填充問題。

在Firefox / IE上顯示iframe的問題

問題描述

1 個解決方案

解決方案1
0 已采納 2013-12-02 18:59:59

在Firefox / IE上顯示iframe的問題

問題描述

1 個解決方案

解決方案1 0 已采納 2013-12-02 18:59:59

解決方案1
0 已采納 2013-12-02 18:59:59