Question

I’m having a problem when I’m trying to show an iframe. Here’s the thing: First I’m loading a video in html5 and then when the video finish the function hide the video and show the iframe div(which is occult) with jquery, but for some reason when the video’s hide the iframe doesn’t appear and when I inspect the element the tag is there but appears with the src empty.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" charset="utf-8"> 
jQuery(document).ready(function() {  
    jQuery("#video").bind("ended", function() {    
        jQuery("#video-promo").hide();      
        jQuery("#video-streaming").show();  
        });    
});
</script>

And here goes the Html:

<div id="video-promo">
    <video width="680" height="371" id="video" autoplay="autoplay">
        <source src="/video/first_test.m4v" type="video/mp4" />
    </video>
</div>

<div id="video-streaming" style="display:none;">
    <iframe width="560" height="315" src="http://www.youtube.com/embed/FmxSk0wZxss" frameborder="0" allowfullscreen></iframe>
</div>

Ideas? Thanks in advance.

Answer 1

You could add small snippet to your functions.php which would enable you to show iframes easily and even set the size inside a post / page or directly in your theme

in your functions.php (or included file):

function myiframe( $atts ) {
    extract( shortcode_atts( array(
        'href' => 'http://the-url',
        'height' => '550px',
        'width' => '600px',     
    ), $atts ) );

    return '<iframe src="'.$href.'" width="'.$width.'" height="'.$height.'"> <p>Your Browser does not support Iframes.</p></iframe>';
}
add_shortcode('iframe', 'myiframe');

.
Directly in posts / pages – How to use:

[iframe href="http://www.exmaple.com" height="480" width="640"]

.
Directly in your theme – How to use:

<?php do_shortcode('[iframe href="http://www.exmaple.com" height="480" width="640"]'); ?>

Attributes Used:

1. href = source of iframe
2. height = height of iframe (you can set default in the function)
3. width = width of iframe (you can set default in the function)

.
hope this helps.
Sagive.