본문 바로가기
html, css, javascript

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

by 타닥타닥 토다토닥 부부 2023. 12. 24.
반응형

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.

반응형

'html, css, javascript' 카테고리의 다른 글

쿠팡 파트너스 배너 오른쪽 정렬  (4) 2024.01.15
iframe 가운데 정렬 방법  (2) 2024.01.04
ul li 줄 간격조절  (0) 2023.08.05
li 가로로 나열하기  (0) 2023.08.05
테이블 안에 그래프 넣기  (0) 2023.08.05

댓글