获取响应式 youtube 视频的高度

Question

我需要获取响应式 YouTube 视频的高度。我已经尝试在几个不同的选择器上使用 jQuery 来定位顶层，例如 .extradiv、#video_background_video_0，还有一些在 iframe 中向下使用，例如 $('#video_background_video_0_yt')。高度()

然而，一切都变成了 null 甚至 0.2。

请问如何获取 YouTube 视频的高度？

<div class="extradiv">
<div id="video_background_video_0" style="z-index: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: hidden;">

            <iframe id="video_background_video_0_yt" style="position: absolute; left: 0px;" frameborder="0" allowfullscreen="1" title="YouTube video player" width="1349" height="759" src="https://www.youtube.com/embed/1CXFhQ33_xs?loop=0&amp;start=0&amp;autoplay=0&amp;controls=1&amp;showinfo=0&amp;wmode=transparent&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fwww.onscreencounselling.com"></iframe>

            </div><div class="edclearer"></div><!-- added to see if I can get a height of video_background_video_0-->
            <!--extradiv--></div>

css:

.extradiv {
    height:100%;
}

#video_background_video_0 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 1

看看这个：http://jsbin.com/qinaruxune/2/edit?css,js,console,output

我正在使用这个 Javascript 代码：

var videoContainer = document.querySelector("#video_background_video_0");
console.log(videoContainer.getBoundingClientRect().height);

此代码采用 ID 为 'video_background_video_0' 的元素，并使用函数 getBoundingClientRect() 获取边界高度元素的高度，即元素的绘制高度。

获取响应式 youtube 视频的高度

Get height of responsive youtube video

youtube

jquery