ఎలా సృష్టించాలి: ప్రతిస్పందక ఐఫ్రేమ్

CSS ద్వారా ప్రతిస్పందక ఐఫ్రేమ్ ను ఎలా సృష్టించాలి నేర్చుకోండి.

ఎలా చేయాలి - ప్రతిస్పందక ఐఫ్రేమ్స్

మొదటి చర్య - హ్యాండల్ జీల్ జోడించండి:

కంటైనర్ ఎలిమెంట్స్ వంటి ఉపయోగించండి మరియు అదిలో iframe జోడించండి:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

రెండవ చర్య - సిఎస్ఎస్ జోడించండి:

కోసం padding-top శతలభాంతాలను జోడించండి, దానివల్ల కంటైనర్ div యొక్క వెడల్పు అనుపాతాన్ని కాపాడండి. ఈ ఉదాహరణ వెడల్పు అనుపాతం 16:9 యొక్క కంటైనర్ ను సృష్టిస్తుంది, ఇది YouTube వీడియోల డిఫాల్ట్ వెడల్పు అనుపాతం.

ప్రతిమా - 16:9 వెడల్పు అనుపాతం

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 వెడల్పు అనుపాతం (9 ను 16 లో విభజించడం 0.5625) */
}
/* అప్పుడు iframe యొక్క శైలిని అమర్చు, దానిని పూర్తి పొడవు మరియు వెడల్పుతో కంటైనర్ div కు సరిపోతుంది */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

亲自试一试

ఇతర వెడల్పు అనుపాతాలు

ప్రతిమా - 4:3 వెడల్పు అనుపాతం

.container {
  padding-top: 75%; /* 4:3 వెడల్పు అనుపాతం */
}

亲自试一试

ప్రతిమా - 3:2 వెడల్పు అనుపాతం

.container {
  padding-top: 66.66%; /* 3:2 వెడల్పు అనుపాతం */
}

亲自试一试

ప్రతిమా - 8:5 వెడల్పు అనుపాతం

.container {
  padding-top: 62.5%; /* 8:5 వెడల్పు అనుపాతం */
}

亲自试一试

ప్రతిమా - 1:1 వెడల్పు అనుపాతం (పొడవు మరియు వెడల్పు ఎల్లప్పుడూ సమానం)

.container {
  padding-top: 100%; /* 1:1 宽高比 */
}

亲自试一试