css - Retrieve width of embedded video using javascript -
i have simple page embedded video. below example. want retrieve width of embedded video's iframe, can vary ( example if video youtube or vimeo ). can put div next it, text, , adjust width of 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"); ( var = 0; < 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 loaded, , first alert ( should have width of iframe ) shows "><", without width of video in between.
i sure it's not because video object null. following lines resize expected. after resizing, same alert brings correct width.
is there can have width available straight away?
i not big fan of libraries such jquery, happy consider in case 1 of them gives straight forward solution doesn't make more complicated parsing string inside tag. in case page needs maintenance in future...
thanks!
i think need set style attribute match width , height attributes:
<iframe style="width:420;height:315" width="420" height="315" src="http://www.youtube.com/embed/a34qtcpnkww" frameborder="0" allowfullscreen> </iframe>
because in function, working style attribute.
Comments
Post a Comment