Recover width and height of an iframe dynamically to adapt its content to the good size

Question

I try to recover width and height of an iframe dynamically to attribute they're values on variables which will are use to adapt another element on the size at the iframe on the loading of the page.

I have this error in the console :

jQuery.Deferred exception: Cannot read property 'width' of null TypeError: Cannot read property 'width' of null at HTMLDocument.

HTML

<iframe src="" scrolling="no" frameBorder="0" width="640" height="360"></iframe>

jQuery

$(function()
{
   var frameEl = window.frameElement;
   var widthIframe = frameEl.width;
   var heightIframe = frameEl.height;

   $(".mediaplayer").css("height", heightIframe + "px"); // attribute 360px
   $(".mediaplayer").css("width", widthIframe + "px");  // attribute 640px
});

[Returns the element (such as or <object>) in which the window is embedded, or null if the element is either top-level or is embedded into a document with a different script origin; that is, in cross-origin situations.](https://developer.mozilla.org/en/docs/Web/API/Window/frameElement)</object> — A. Wolff, Jun 22 '16 at 16:02

score 0 · Answer 1 · answered Jun 22 '16 at 16:00

0

I recommend using a cross browser library

answered Jun 22 '16 at 16:00

user1119279

331
3
9

Recover width and height of an iframe dynamically to adapt its content to the good size

1 Answers1