Responsive iframe video... can have one but not the other

1

What does one do in this situation?
You want an iframe to take all of the wrapper’s space on mobile, but not desktop. H & W for responsive set to 100%, but desktop needs to be set to W of 50% & min-height of 400px. :thinking:

You can’t use the video tag for YouTube videos. If this is wrong, please show me.

HTML…

<div class="video">
  <iframe class="iframe" src="https://www.youtube.com/embed/Erf2iFHG44M?rel=0&amp;controls=1&amp; frameborder=" 5 "; allowfullscreen></iframe>
</div>

CSS that looks perfect on desktop, but too narrow on mobile…

.video {
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
}

.iframe {
  width: 50%;
  min-height: 400px;
  border: 5;
}

CSS that looks perfect on mobile, but too wide on desktop…

.video {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}

.iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 5;
}

This is for the first tribute page project, so it’s limited to HTML & CSS.
I feel like I’m so close to figuring this out. I’m now on day 3 of searching out & trying different code tactics, but I do believe I reached the end of the list of code to try out.

Is it even possible to achieve this when limiting the code to just HTML & CSS?

Thanks in advance…
Tonia

2

What about Media queries? Just create media Query for mobile and place code in it.

1 Like
3

Yes! I knew there was something!
Thank you @StanSkrivanek