Получите высоту отзывчивого видео youtube

Question

Мне нужно получить высоту отклика на видео youtube. Я попытался использовать jQuery на нескольких разных селекторах, нацеленных на верхние уровни, такие как .extradiv, # video_background_video_0, а также некоторые из них в пределах iframe, например $ ('# video_background_video_0_yt'). Height()

Однако все становится недействительным или даже 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); 

Этот код берет элемент с идентификатором ' video_background_video_0 ' и используя функцию getBoundingClientRect() Я получаю предельную высоту элемента, который является окрашенной высотой элемента.