CSS RWD Videos

Video Aspect Ratio Problem

किसी image के उलट, एक <video> या embedded <iframe> (जैसे कोई YouTube embed) CSS से उसकी width constrain होने पर automatically अपना aspect ratio preserve नहीं करता -- naive resizing या तो video को distort कर देता है या भद्दे black bars छोड़ता है जब तक aspect ratio explicitly maintain न किया जाए।

उदाहरण: The Video Aspect Ratio Problem

<style>
iframe {
  width: 100%;
}
</style>
<iframe src="about:blank" height="200"></iframe>

Padding-Top Percentage Trick

Native CSS support मौजूद होने से पहले, standard technique video को padding-top: 56.25% (16:9 ratio के लिए percentage) वाले container में wrap करती थी और उस padded box को भरने के लिए video को absolute position करती थी, इस fact का फ़ायदा उठाते हुए कि percentage padding top/bottom sides के लिए भी container की WIDTH से calculate होती है।

उदाहरण: The Padding-Top Percentage Trick

<style>
.wrapper {
  position: relative;
  padding-top: 56.25%;
  background: #ddd;
}
.wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
<div class="wrapper">
  <iframe src="about:blank"></iframe>
</div>

Modern aspect-ratio Property

aspect-ratio CSS property (जैसे aspect-ratio: 16 / 9) अब natively वही करती है जो padding-top hack simulate करता था, किसी video या उसके wrapper को बिना किसी absolute positioning wrapper trick के सीधे एक fixed width-to-height ratio बनाए रखने देते हुए।

उदाहरण: The Modern aspect-ratio Property

<style>
iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}
</style>
<iframe src="about:blank"></iframe>

Native Video Elements पर max-width

एक native <video> element (कोई iframe embed नहीं) images जैसे ही max-width: 100%; height: auto; rule को respond करता है, क्योंकि browser को पहले से पता है और यह उसका intrinsic aspect ratio preserve करता है।

padding-trick/aspect-ratio techniques मुख्य रूप से उन iframe embeds के लिए चाहिए जो अपना intrinsic ratio CSS को नहीं दिखाते।

उदाहरण: max-width on Native Video Elements

<style>
video {
  max-width: 100%;
  height: auto;
}
</style>
<video controls></video>

Responsive Video के लिए Performance Considerations

Autoplaying background video mobile data और battery पर खासतौर पर costly है -- responsive video strategy में अक्सर एक certain breakpoint से नीचे पूरे video के बजाय एक static poster image या lower-resolution source serve करना शामिल होता है।

उदाहरण: Performance Considerations for Responsive Video

<style>
video {
  width: 100%;
}
@media (max-width: 600px) {
  video {
    display: none;
  }
}
</style>
<video poster="https://placehold.co/600x300" controls></video>