获取iframe最接近的div宽度始终返回0

Question

我正在为我的Joomla模板编写一个jquery脚本，以处理来自YouTube的视频的响应和调整大小。

在一个页面中可以有超过1个视频，可以嵌入不同的容器元素中，例如div或p。

现在，在我的脚本中，我获取iframe的原始尺寸，然后计算它们的比率，然后获取它们的容器元素宽度并计算iframe的新高度属性。

我的问题是，对于我正在处理的页面上的第二个iframe，jQuery总是返回宽度0，无论如何。

当我在Joomla之外尝试代码时，它可以正常工作。

问题：

• 可能是因为jQuery拒绝正确计算实际页面上最近（'元素'）的宽度，并且总是返回0？
• 你能发现我的代码中明显错误的任何内容吗？

代码：

HTML：

在我网站的该页面中，有2个嵌入式YT视频，位于不同的位置 这是iframe周围的html：

cd

jQuery的：

这里是jQuery无法计算Joomla中第二个iframe最近div的宽度（但在其他地方成功： http://jsfiddle.net/joomquery/Lc9z3pbv/ ）。

<div class="video-container youtube">
    <iframe id="myvideo" width="964" height="544" src="http://www.youtube.com/embed/Eol8eo4WDKY?enablejsapi=1&amp;html5=1&amp;showinfo=0&amp;controls=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;autoplay=1" frameborder="0" allowfullscreen=""></iframe>
</div>
<div class="item_desc">
    <p>
        <iframe src="//www.youtube.com/embed/JfOD35Ebo5A" width="640" height="480" allowfullscreen="allowfullscreen" style="display: block; margin-left: auto; margin-right: auto; "></iframe>
    </p>
</div>
<div class="video-container youtube">
    <iframe id="myvideo" width="964" height="544" src="http://www.youtube.com/embed/Eol8eo4WDKY?enablejsapi=1&amp;html5=1&amp;showinfo=0&amp;controls=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;autoplay=1" frameborder="0" allowfullscreen=""></iframe>
</div>

(function($)
{
    $(document).ready(function()
    {               
        $.fn.myfunction = function(e) {
            $(e).each(function(i){
                var orW = $(this).attr("width");
                var orH = $(this).attr("height");
                var ratio = orH/orW;
                var w  = $(this).closest("div").width();
                //alert (w);
                var h = ratio * w;
                h = Math.round(h);

                //alert ("Parent size: " + w + ' ' + h);

                $(this).parent().css('height',h+10);
                $(this).attr('width',w);
                $(this).attr('height',h);
            });
        }; 

    var iframe = $('iframe');
    $.fn.myfunction(iframe);

})(jQuery);

(function ($) {
    $(document).ready(function () {
        $.fn.myfunction = function (e) {
            $(e).each(function (i) {
                var orW = $(this).attr("width");
                var orH = $(this).attr("height");
                var ratio = orH / orW;
                var w = $(this).closest("div").width();
                var h = ratio * w;
                h = Math.round(h);

                $(this).parent().css('height', h + 10);
                $(this).attr('width', w);
                $(this).attr('height', h);
            });
        };

        var iframe = $('iframe');
        $.fn.myfunction(iframe);

    });
})(jQuery);