html 두개의 비디오를 한줄에 넣기

html 두개의 비디오를 한줄에 넣기

 

html 코드

<!-- style="display: flex;" 두의 영상를 수직으로 놓기위해 display 옵션을 flex로 설정-->
<!-- justify-content: space-between; 수직 영상 사이에 여백을 두기 위해 justify-content 옵션을 space-between으로 설정 -->
<div style="display: flex; justify-content: space-between;">
  <!-- autoplay 자동재생 loop 반복재생 muted 음소거  playsinline 모바일 기기에서 동영상을 인라인으로 재생 -->
  <video style="width:45%; height:auto;" autoplay loop muted playsinline>
    <source src="https://blog.kakaocdn.net/dn/cIbKFH/btsCwcDRcaH/lAPgHolZgQKnyVoRaox0T1/tfile.mp4" type="video/mp4">
  </video>
  <!-- autoplay 자동재생 loop 반복재생 muted 음소거  playsinline 모바일 기기에서 동영상을 인라인으로 재생 -->
  <video style="width:45%; height:auto;" autoplay loop muted playsinline>
    <source src="https://blog.kakaocdn.net/dn/CbvD9/btsCzRxPkZA/HpI4yYrTKpUztoJvgnJ6uK/tfile.mp4" type="video/mp4">
  </video>
</div>

 

html 코드 실행 결과

 

 

 

코드팬 위에서 html 코드를 수정하면서 이해해 보세요

See the Pen two video in one line by hyunho (@momalcy) on CodePen.