I have a simple page with an embedded video. Below is an example. I want to retrieve the width of the embedded video’s iframe, which can vary ( for example if the video is from youtube or vimeo ). Then I can put a div next to it, with some text, and adjust the width of the latter accordingly
<html>
<head>
</head>
<body onLoad = "resizeElements()">
<iframe width="420" height="315" src="http://www.youtube.com/embed/a34QTcpnKww" frameborder="0" allowfullscreen>
</iframe>
</body>
<script language="JavaScript" type="text/javascript">
function resizeElements()
{
var iframeVideos = document.getElementsByTagName("iframe");
for ( var i = 0; i < iframeVideos.length; i++)
{
video = iframeVideos[i];
alert ( ">" + video.style.width+ "<" );
video.style.width = "112px";
video.style.height = "63px";
alert ( ">" + video.style.width+ "<" );
}
}
</script>
</html>
The page is loaded, and the first alert ( which should have the width of the iframe ) only shows “><“, without the width of the video in between.
I am sure that it’s not because the video object is null. The following lines resize it as expected. After the resizing, the same alert brings up the correct width.
Is there anything I can do to have the width available straight away?
I am not a big fan of libraries such as jQuery, but happy to consider in case one of them gives a straight forward solution which doesn’t make it more complicated than just parsing the string inside the tag. Just in case the page needs some maintenance in the future…
Thanks!
I think that you just need to set the style attribute to match your width and height attributes:
Because in your function, you are working with the style attribute.