[ RESPONSIVE ] 22 비디오

[ RESPONSIVE ] 22 비디오

 

 

See the Pen [ RESPONSIVE ] 22 비디오 by larmong (@larmong) on CodePen.

 

 

 

 

GitHub에서 보기 Click!

 

 

---

 

 

* 비디오 관련 속성들

 

ㄴ 영상 파일이 있을 때

<video autoplay="autoplay" controls="controls" loop="loop">
  <source src="assets/img/video.mp4" type="video/mp4">	
</video>

ㄴ 유튜브 영상 퍼오기 ( 퍼온 소스에서 크기 값 삭제하고, 반응형으로 만들어주기 )

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

/* 비디오 */
.video { position: relative; width: 100%; padding-bottom: 56.25%; }
.video iframe { position: absolute; width: 100%; height: 100%; }

 

 

---

 

* 반응형 사이트 강의 보는곳(WEBSTORYBOY) click!