0

Hi there,

I'm trying to alter the below iFrame code (which places a music player on my website) so that it resizes according to what screen people view it on.

My website is fully responsive, and the div that I'm wanting to put it in changes width depending on what screen size is viewing it.

How would I accomplish this with this code? I have tried making the width 100% which works for the width but the height remains the same. Making the height 100% too doesn't work. I need to make the width 100% and the height match whatever the width is.

<iframe style="border: 0; width: 350px; height: 350px;" src="http://bandcamp.com/EmbeddedPlayer/album=4129200630/size=large/bgcol=ffffff/linkcol=0687f5/transparent=true/" seamless><a href="http://store.rjthompsonmusic.com/album/the-cognitive-rules-ep">The Cognitive Rules (EP) by RJ Thompson</a></iframe>

Any help would be great,

R

3
Contributors
6
Replies
23
Views
4 Years
Discussion Span
Last Post by iamthwee
0
<script type="text/javascript">
function sizer() { var viewportheight;
if (typeof window.innerWidth != 'undefined') { viewportheight = window.innerHeight }
elseif (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { viewportheight = document.documentElement.clientHeight }
else { viewportheight = document.getElementsByTagName('body')[0].clientHeight }
document.getElementById('extern').style.height=viewportheight-26 + 'px'; }
document.onresize = sizer(); </script>
<!--[if IE]><script type='text/javascript'>window.onresize=sizer;</script><![endif]-->
<title>Linking external site</title>
<link rel='stylesheet' href='/style.css.php' type="text/css" media='all'>
</head>
<body onload='sizer();' style='margin:0;padding:0;height:100%;text-align:center;'>
<div style='height:23px;width:100%;text-align:center;'>External site</div>
<iframe id='extern' frameborder='0' width='100%' height='200px' src='source.href'>loading page</iframe>
<script type='text/javascript'>sizer();</script>
</body></html>

it is a crappy example, that works

Edited by almostbob

0

the crappy example prints a single line of html across the page and then the rest of the screen is iframe

0

Hi there,

Thanks for the reply. I'm not sure I understand the answer however. How would I apply that to my iframe code?

Many thanks,

R

0

The javascript will resize any div with id='extern'

for your use try

<!DTD your html version> 
<html><head>
<script type="text/javascript">
function sizer() { var viewportheight;
if (typeof window.innerWidth != 'undefined') { viewportheight = window.innerHeight }
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { viewportheight = document.documentElement.clientHeight }
else { viewportheight = document.getElementsByTagName('body')[0].clientHeight }
document.getElementById('extern').style.height=viewportheight + 'px'; }
document.onresize = sizer(); 
</script>
<!--[if IE]><script type='text/javascript'>window.onresize=sizer;</script><![endif]-->
</head>
<body onload='sizer();' style='margin:0;padding:0;height:100%;text-align:center;'>
<iframe id='extern' style="border: 0; width: 100%; height: 350px;" src="http://bandcamp.com/EmbeddedPlayer/album=4129200630/size=large/bgcol=ffffff/linkcol=0687f5/transparent=true/" seamless><a href="http://store.rjthompsonmusic.com/album/the-cognitive-rules-ep">The Cognitive Rules (EP) by RJ Thompson</a></iframe>
<script type='text/javascript'>sizer();</script>
</body>

This code fullscreens the player

Edited by almostbob

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.