Kevin Powell - Community•13mo ago

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>

1 Reply

MarkBoots•13mo 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)">

Gaming

Programming

Adjusting iframe size for mobile responsiveness in Tailwind CSS