Problems with displaying an iframe on firefox/IE

A

admin

Administrator
Staff member
I've got two iframes on a wordpress page, and I wanted it to resize itself with css, depending on screen resolution. I've came up with the code like below:

Code: 
<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>

Everything works fine on Chrome or Opera, but when I try out Firefox or IE, the iframes doesn't appear. I can hear the sound from dailymotion video, but it just doesn't show up.

Here is the css

Code: 
.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;
}

I have also added some media queries. I can see that there is something wrong with:

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

because when I delete width and height it does display, but of course doesn't resize anymore. Can anybody tell me what's wrong?

Here is the article with resize solution I've decided to use
<a href="http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php" rel="nofollow">http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php</a>
 
You must log in or register to reply here.