CSS3로 영상 풀스크린 만들기 - 어떤 상황에서도 예쁘게 비율대로!

Keyword - css youtube background cover

HTML

 

<div class="video-background">

    <div class="video-foreground">

      <iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>

    </div>

</div>

 

 

 

CSS

 

* { box-sizing: border-box; }

.video-background {

  background: #000;

  position: fixed;

  top: 0; right: 0; bottom: 0; left: 0;

  z-index: -99;

}

.video-foreground,

.video-background iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

}

#vidtop-content {

top: 0;

color: #fff;

}

.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }

.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }

.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }

@media (min-aspect-ratio: 16/9) {

  .video-foreground { height: 300%; top: -100%; }

}

@media (max-aspect-ratio: 16/9) {

  .video-foreground { width: 300%; left: -100%; }

}

@media all and (max-width: 600px) {

.vid-info { width: 50%; padding: .5rem; }

.vid-info h1 { margin-bottom: .2rem; }

}

@media all and (max-width: 500px) {

.vid-info .acronym { display: none; }

}

출처 :

https://codepen.io/dudleystorey/pen/PZyMrd

언제나(resize) 어디서나(PC & Mobile) 예쁘게 보여주는 것은

매우 어렵다... (이걸 모두 알아야 하는데!)

그리고 그것이 항상 내게 주어진 일이다ㅠㅠ

사진은 background-image로 하고

background-size: cover 를 쓰면

완벽! 정말! 너무너무!! 예쁘게 보여준다.

그리고 이전에 그런 일들을 해왔다.

근데 영상은 달랐다..

일단 이미지가 아니며 영상은 비율이 안 맞으면

빈공간이 검게 보여 풀스크린이 아니게 된다!ㅠㅠ

내가 좋아하고 언젠간 만들어보고 싶다~ 했던

참고 사이트 :

http://www.powerhouse-company.com/

메인 영상이라도 드디어 비슷하게 만들 기회가 왔다!

했는데 역시나 어려웠고..

저 사이트는 script로 계속 width, height을 비율대로 계산해주고 있었다.

누가 만들었는지 참.. 그 공식 알려주실래요?ㅠㅠㅠㅠ

공식을 파보려고 했는데 CSS3로 가능할 것 같아 구글링!

일단 내가 찾은 CSS3만으로 풀스크린 만드는 방법은

구글에 css youtube background cover 라고 검색해서 찾았다.

구글신 믿습니다.