Responsive YouTube Video without specific aspect ratio-CodePudding

I'm embedding some video coming from a CMS and hosted on YouTube In CMS the only saved part is video code

The issue is that every video has a different aspect ratio

I tried

<iframe width="100%" src="https://www.youtube.com/embed/MYViDoeCoDE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

And also search for a CSS based code but all of them require to specify aspect / ration in the container

Is it possible? Would it be possible with Vimeo?

CodePudding user response：

Would something like this work? I don't have any of your specific videos so I couldn't really test much. If it's not what you're looking for I'll delete the answer and hopefully someone else has a better idea. Apparently SO doesn't like iframes or embeds or something so here's a fiddle:

https://jsfiddle.net/astombaugh/10dtsLpk/26/

.iframeContainer {
  max-width: 100%;
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}

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

<div >
  <iframe src="https://www.youtube.com/embed/5qap5aO4i9A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CodePudding user response：

When CSS can finally apply media queries to HTML tags we will be able to adapt dynamic aspect ratios without the help of JavaScript. Till then you'll need to provide rulesets for different ARs.

The most commonly used is aspect ratio is widescreen 16:9. Basically any digital video file uploaded to a media streaming service like Youtube or Vimeo will be automatically transcoded into several copies with varying resolutions that will be optimal when streaming from their platform. The minutiae of video resolution, aspect ratio, codecs, file types etc are not as critical as they were 5 to 6 years ago. Earlier, I asked you about specific ARs you have to deal with, but you were AFK (Away From the Keyboard), so I proceeded to create a CSS example of 3 videos hosted on Vimeo (for some reason Youtube does not work on SO anymore). They are as follows:

Widescreen 16:9 (90% of all videos in the interwebs)^✼
TV 4:3 (7% of all videos in the entire world)^✼
Ultra-Widescreen 21:9 (3% of all videos in the known universe)^✼

^{^✼Don't believe my statistics they are biased and inaccurate because of the pr0n industry probably has a gazillion terabytes of video streaming at the highest quality to all corners of the world}

Back in the day we would use a container <div> with position: relative and an <iframe> with position: absolute and a weird padding-bottom (or -top) of 56.25% to fill the height so it matches the width, ratio wise. Now there's some cleaner ways to reach optimal AR using either vw or vh and flex:


    figure {
      //...
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
    }

    .wide {
      /* 16:9 */
      width: 96vw;
      height: 54vw;
    }

    .tv {
      /* 4:3 */
      width: 96vw;
      height: 72vw;
    }

    .ultra {
      /* 21:9 */
      width: 96vw;
      height: 41vw;
    }

    iframe {
      max-height: 99vh;
    }

The combination of positions and the huge 56.25% padding pushed the <iframe> until it reached both width and height matching a 16:9 AR. flex also stretches content as well and setting width and height in vw or vh makes it easier to adjust the size of the video in relation to the viewport. The last ruleset acts like a clamp just in case the height of tall ratios such as 4:3 with height: 72vw (.tv) exceeds the viewport. Here are some articles that have information pertaining to social media and streaming sites as well as topics concerning AR and responsive design.

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font: 500 2ch/1.2 "Segoe UI"
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  flex-flow: column nowrap;
}

figure {
  width: 100%;
  height: 100%;
  /* Not needed if <div> used */
  margin: 10px 0 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
/*