Member Avatar for hindu times

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
  • 281 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by iamthwee
Member Avatar for almostbob 
<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
Member Avatar for almostbob

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

Member Avatar for hindu times

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

Member Avatar for almostbob

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
Member Avatar for hindu times

Thanks. I'll give it a go over the weekend.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.