Adjusting iframe size for mobile responsiveness in Tailwind CSS

I am currently working on a project where I have a grid layout containing an iframe with audio content. I'm using Tailwind CSS for styling, and I'm facing an issue with making the iframe fit the mobile responsive screen. The first picture is my website and the second picture is how I want my plug in for apple music to fit. The issue is that the iframe doesn't adjust properly for mobile screens. I've tried adjusting the width, height, maxWidth, and maxHeight properties, but I'm not achieving the desired responsiveness. If anyone can help with this that'll be lovely!
<div className='bg-black rounded-lg shadow-xl lg:col-span-2 flex'>
<div className='w-2/5 h-full hidden lg:flex lg:visible'>
{/* ... (omitted for brevity) */}
</div>
<div className='w-full h-full flex flex-col overflow-hidden'>
<div className='w-full h-1/3 border flex items-center'>
<h2 className='uppercase text-sm lg:text-xl font-clash tracking-widest ml-4 font-bold text-white'>Current Rotation</h2>
</div>
<div className='flex w-[100%] lg:w-[60%] border h-auto mx-auto transition ease-in duration-150'>
{sounds.map((slide, index) => (
<iframe
allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
width="100%"
height="200"
key={index}
style={{
maxWidth: '500px',
maxHeight: '200px',
overflow: 'hidden',
borderRadius: '10px',
padding: '0 5px'
}}
src={slide}
></iframe>
))}
</div>
</div>
</div>
<div className='bg-black rounded-lg shadow-xl lg:col-span-2 flex'>
<div className='w-2/5 h-full hidden lg:flex lg:visible'>
{/* ... (omitted for brevity) */}
</div>
<div className='w-full h-full flex flex-col overflow-hidden'>
<div className='w-full h-1/3 border flex items-center'>
<h2 className='uppercase text-sm lg:text-xl font-clash tracking-widest ml-4 font-bold text-white'>Current Rotation</h2>
</div>
<div className='flex w-[100%] lg:w-[60%] border h-auto mx-auto transition ease-in duration-150'>
{sounds.map((slide, index) => (
<iframe
allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
width="100%"
height="200"
key={index}
style={{
maxWidth: '500px',
maxHeight: '200px',
overflow: 'hidden',
borderRadius: '10px',
padding: '0 5px'
}}
src={slide}
></iframe>
))}
</div>
</div>
</div>
royce portfolio
inspiration
1 Reply
MarkBoots
MarkBoots12mo ago
don't think the iframe size can be adjusted to its contents with css alone. It can not see how large the content of it is You could try it with js
function resizeIframe(obj){
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
function resizeIframe(obj){
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
and on the iframe itself add
<iframe .... onload="resizeIframe(this)">
<iframe .... onload="resizeIframe(this)">
Want results from more Discord servers?
Add your server