在Wordpress中显示iframe

时间:2012-09-10 20:47:28

标签: jquery html5 wordpress iframe

当我试图展示iframe时,我遇到了问题。事情是这样的:首先我在html5中加载一个视频,然后当视频完成后,该功能隐藏视频并用jquery显示iframe div(这是神秘的),但出于某种原因,当视频隐藏iframe时没有出现,当我检查元素时,标记在那里但是src为空

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

这就是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>

想法?提前谢谢。

1 个答案:

答案 0 :(得分:0)

你可以在你的functions.php中添加一个小片段,这样你就可以轻松地显示iframe,甚至可以在帖子/页面内或直接在主题中设置大小

在functions.php(或包含文件)中

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');


直接在帖子/页面中 - 如何使用:

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


直接在您的主题中 - 如何使用:

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

使用的属性:

  1. href = iframe的来源
  2. height = iframe的高度(您可以在函数中设置默认值)
  3. width = iframe的宽度(您可以在函数中设置默认值)

  4. 希望这有帮助。
    Sagive。