在 Wordpress 中显示 iframe答案

【问题标题】：Displaying an iframe in Wordpress在 Wordpress 中显示 iframe
【发布时间】：2012-09-10 20:47:28
【问题描述】：

我在尝试显示 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>

想法？提前致谢。

【问题讨论】：

尝试删除display:none，并在jQuery(document).ready 事件中放置jQuery('#video-streaming').hide() 以最初隐藏它
还是不行。这里的问题是隐藏和显示事件有效但是当我检查元素时显示如下：<iframe width="560" height="315" src="" frameborder="0" allowfullscreen=""></iframe>

标签： jquery html wordpress iframe

【解决方案1】：

您可以将小 sn-p 添加到您的 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"]'); ?>

使用的属性：

href = iframe 的来源
height = iframe 的高度（可以在函数中设置默认值）
width = iframe 的宽度（可以在函数中设置默认值）

.
希望这会有所帮助。
聪明的。

【讨论】：