반응형 웹(8) - 가변 동영상

카테고리 없음

반응형 웹(8) - 가변 동영상

김검정 2024. 7. 19. 11:53

이미지를 가변 이미지로 처리해주었던 것과 동일한 처리를, 동영상에도 똑같이 적용할 수 있다. 그러나 문제는 동영상 서비스에 따라 그 성질이 조금씩 다를 수 있다는 것이다.

(mp4와 같은 일반 동영상 파일 뿐 아니라 유튜브나 비메오 등에서 공유한 동영상 콘텐츠를 사용하는 경우도 있기 때문에 여러가지를 고려해서 처리해야 한다.)

<!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>가변 동영상</title>
    <style>
    	video{
        	width: 100%;
        }
    </style>
  </head>
  <body>
    <video src="./videos/my.mp4" controls></video> /*controls 추가하면 동영상 내의 플레이 버튼 등 생김*/
  </body>
</html>

내가 영상 파일을 가지고 있다면 위와 같이 처리할 수 있다.

하지만 유튜브등 어디서 가져온 동영상을 사용하면 어떨까? 유튜브에서 공유 > 퍼가기 내에 있는 소스 코드를 가져와 보자

<!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>가변 동영상</title>
  </head>
  <body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/7fg_klS-2kw?si=HSmtCzsDwj2QfEnZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  </body>
</html>

위에 동영상 서비스에서 제공하는 태그같은 경우 크기만 조절해서는 동영상이 제대로 나오지 않는다.

이러한 동영상을 가변적으로 처리하려면 다른 방법이 필요하다.

<!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>가변 동영상</title>
    <style>
        .player{
            padding-top: 56.25%; /*종횡비로 설정 315 / 560으로 계산 -> height / width */
            position: relative;
        }

        iframe{
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
        }

    </style>
</head>
  <body>
      <div class="player">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/7fg_klS-2kw?si=HSmtCzsDwj2QfEnZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
      </div>
  </body>
</html>

width, height만을 조절해서는 내가 원하는대로 크기 조정을 할 수 없던 동영상이

여백의 크기가 달라질때 동영상 크기가 맞춰지는 것을 확인할 수 있다.