유튜브 동영상 워드프레스 (좌우로 꽉 차서 재생되도록 하기) pat.1

유튜브 동영상을 임베드하면 데스크톱(PC)에서는 제대로 나오지만 모바일 기기에서는 화면 전체가 나오지 않고 일부만 잘려서 표시되는 경우가 있습니다. 다음 글에서 모바일 장치에서 유튜브 등 iframe으로 임베드되는 동영상이 반응형으로 재생되도록 잘리지 않고 삽입하는 방법을 설명하고 있습니다.

모바일 기기에서 유튜브 동영상을 가로로 확장하여 화면 좌우 가장자리까지 꽉 차도록 하고 싶은 경우가 있을 수 있습니다. 이 경우 위의 글에서 제시된 CSS 코드를 조금 수정하여 구현할 수 있습니다.

유튜브 동영상을 화면 좌우 가장자리로 확장하여 표시하는 방법(좌우로 꽉 차서 재생되도록 하기)

\\\”워드프레스: 모바일 기기에서 유튜브 동영상이 잘리지 않고 표시되도록 하기\\\” 글에서 제시된 코드를 사용하면 모바일 기기에서 다음 그림과 같이 YouTube 동영상이 콘텐츠 컨테이너 내에서 꽉 차게 보입니다.

아래 그림과 같이 모바일 기기(안드로이드폰/아이폰 등)에서 동영상이 좌우로 꽉 차도록 하고 싶은 경우가 있을 수 있습니다.

그런 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.

/* On mobile devices, make the video (iframe, object, embed) stretch out of its container to the edges of the screen. *//* 모바일 기기에서, 비디오(iframe, object, embed)가  컨테이너를 벗어나 화면의 가장자리까지 늘어나게 만드는 방법 *//* Define the video container. */.video-container {  /* Position relative so the absolute positioned child elements (i.e. iframe, object, embed) are positioned relative to this container. */  position: relative;  /* Padding bottom is given as percentage to maintain aspect ratio of the video. This is for 16:9 aspect ratio. It's zero height initially.*/  padding-bottom: 56.25%;  height: 0;  /* Hide the overflow content. */  overflow: hidden;}/* Apply styles to the iframe, object and embed elements inside the video container. */.video-container iframe,.video-container object,.video-container embed {  /* Absolute position to stretch the video to the full size of the container. */  position: absolute;  top: 0;  left: 0;  /* Make them occupy the full width and height of the container. */  width: 100%;  height: 100%;}/* Ensure the iframe and other embeds in the content don't exceed their parent width. */.entry-content img,.entry-content iframe,.entry-content object,.entry-content embed {  max-width: 100%;}/* Media query for devices with max screen width of 767px (usually mobile devices). */@media screen and (max-width: 767px) {  .video-container {    /* Positioning and width is changed to viewport width (vw) to make the video stretch full screen width. */    position: relative;    width: 100vw;    left: 50%;    right: 50%;    /* Negative margins are used to pull the container to the left and right to fit the screen. */    margin-left: -50vw;    margin-right: -50vw;  }  .video-container iframe,  .video-container object,  .video-container embed {    /* The position is set to absolute to make the video occupy the entire space of the container. */    position: absolute;    /* Width and height are set to viewport width (vw) units to maintain aspect ratio and make video as wide as the screen. */    width: 100vw;    height: 56.25vw; /* maintain a 16:9 aspect ratio */    left: 0;    right: 0;  }}

만약 수평 스크롤바가 표시되는 경우에는 다음과 같은 CSS 코드를 추가합니다.

body, html {  overflow-x: hidden;}

워드프레스에서는 상기 CSS 코드를 외모 » 사용자 정의하기 » 추가 CSS 섹션에 추가합니다.

마찬가지로 동영상 임베드 공유 코드는 다음과 같은 형식으로 입력합니다.

<div class=\\\"video-container\\\"> 동영상 Embed 코드 </div>

참고