반응형
자기가 직접 동영상 파일을 가지고 그것을 컨트롤 하는 것은
<video> 태그를 사용하면 되지만
외부 유투브 동영상 같은 것들을 컨트롤 하려면
아래와 같이 div 태그로 감싸주고 종횡비 만큼 공백을 준 뒤, 그 위치로 동영상을 배치하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 종횡비를 구해서 div에 여백을 주고 그 여백 안에 iframe을 덮는다 */
div{
padding-top: calc((315/560)*100%);
position: relative;
}
iframe{
width : 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
}
</style>
</head>
<body>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/En_Vfxcn4AA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</body>
</html>
반응형