유체 너비 비디오-CSS 튜토리얼-php.cn

그러나 ... 종횡비, 기존 콘텐츠, 비 기술적 사용자 등

이것은 fitvids.js가 오는 곳입니다

대신 순수한 자바 스크립트를 사용하십시오

집

웹 프론트엔드

CSS 튜토리얼

유체 너비 비디오

Jennifer Aniston

Apr 09, 2025 am 09:13 AM

유체 너비 비디오

오늘날 반응 형 및 유동적 인 웹 레이아웃 시대에는 완벽한 조화를 방해하는 미디어 유형이 있습니다 : 비디오. 웹 사이트에 비디오를 표시하는 방법에는 여러 가지가 있습니다. 비디오를 호스팅하고 HTML5를 살펴볼 수 있습니다<video></video> 태그 디스플레이; YouTube, Vimeo 또는 기타를 사용하여 제공 될 수도 있습니다<iframe></iframe> 비디오 제공 업체를 표시하는 코드. 적절한 종횡비를 유지하면서 모든 비디오를 유체 너비로 유지하는 방법을 살펴 보겠습니다.

이 비디오 임베딩 시나리오에서는 정적 폭과 높이를 선언하는 것이 매우 일반적입니다.

<video ...="" controls="" height="300" width="400"></video>
<iframe ...="" height="300" width="400"></iframe>
<object ...="" height="300" width="400"></object>
<embed ...="" height="300" width="400"></embed>

로그인 후 복사

추측? 유체 폭 환경에서 정적 폭을 선언하는 것은 좋은 생각이 아닙니다. 비디오의 상위 컨테이너가 선언 된 400 픽셀보다 줄어들면 어떻게됩니까? 그것은 넘쳐나고 말도 안되고 어색해 보일 수 있습니다.

그래서 우리는 이것을 할 수 없습니까?

<video ...="" width="100%"></video>

로그인 후 복사

예, 할 수 있습니다! 표준 HTML5 비디오를 사용하는 경우 비디오가 컨테이너 너비에 맞게 조정됩니다. 중요하게도, 당신이 할 때, 당신이 할 때, 높이 선언을 제거하여 비디오가 성장하고 수축하여 종횡비를 유지하여 빈 공간을 채우는 어색한 "막대"가 없도록 (실제 비디오는 요소의 크기에 관계없이 종횡비를 유지합니다).

CSS를 통해이를 수행 할 수 있습니다 (HTML에서 선언 된 내용에 대해 걱정하지 않고) :

 동영상 {
  /* 응답 성을 위해 다른 스타일을 대체합니다*/
  너비 : 100%! 중요;
  높이 : 자동! 중요;
}

로그인 후 복사

`<iframe></iframe>` 비디오 (YouTube, Vimeo 등)

처리가 통과 될 때<iframe></iframe> 위의 팁은 비디오를 전송할 때 도움이되지 않습니다. 100%의 강제 너비는 유효하지만 height: auto ¹⁵⁰ 픽셀의 정적 높이로 끝납니다.

다행히도 몇 가지 가능한 해결책이 있습니다. 그중 하나는 Thierry Kobletz에 의해 처음 만들어졌으며 2009 년에 목록에 게시했습니다 : 비디오 용 내장 규모 만들기. 이 기술을 사용하여 고유 한 종횡비로 비디오를 다른 요소로 랩핑 한 다음 해당 요소 내에 비디오를 절대적으로 배치합니다. 이를 통해 유체 폭과 의존 할 수있는 합리적인 높이를 얻을 수 있습니다.

<div class="videoWrapper">
  <iframe allowfullscreen="" frameborder="0" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" width="560"></iframe>
</div>

로그인 후 복사

.VideOwRapper {
  위치 : 상대;
  패딩-바닥 : 56.25%; / * 16 : 9 */
  높이 : 0;
}
.VideOwrapper iframe {
  위치 : 절대;
  상단 : 0;
  왼쪽 : 0;
  너비 : 100%;
  높이 : 100%;
}

로그인 후 복사

예를 들어 HTML에서 종횡비를 직접 조정할 수있는 영리한 적응 방법이 있습니다.

<div style="--aspect-ratio: 3 / 4;">
  <iframe ...></iframe>
</div>

로그인 후 복사

.VideOwRapper {
  ...
  /* 16/9로의 폴백, 그렇지 않으면 HTML의 비율을 사용하십시오*/
  패딩-바닥 : calc (var (-Spect-Ratio, .5625) * 100%);
}

로그인 후 복사

 .VideOwrapper iframe,
.VideOwrapper Imbed,
.VideOwRapper Object {}

로그인 후 복사

그러나 ... 종횡비, 기존 콘텐츠, 비 기술적 사용자 등

위의 기술은 훌륭하지만 몇 가지 한계가 있습니다.

래퍼 요소가 필요하므로 YouTube에서 직접 코드를 복사하고 붙여 넣을 수 없습니다. 사용자는 더 똑똑해야합니다.
오래된 콘텐츠가 있고 유체로 재 설계하는 경우 모든 오래된 비디오에는 HTML 조정이 필요합니다.
모든 비디오에는 동일한 종횡비가 필요합니다. 그렇지 않으면, 그것들은 다른 종횡비로 캐스트되며 당신은 "바"를 얻게됩니다. 또는 조정하려면 해당 클래스 이름 도구 상자가 필요하므로 추가 복잡성이 추가됩니다.

이러한 제한 사항 중 하나가 귀하에게 적용되면 JavaScript 솔루션 사용을 고려할 수 있습니다.

상상해보십시오 : 페이지가로드되면 모든 비디오를보고 종횡비를 저장합니다. 즉시 한 번 수행하고 창이 조정 될 때마다 모든 비디오는 사용 가능한 너비를 채우고 종횡비를 유지하도록 크기가 조정됩니다. jQuery JavaScript 라이브러리를 사용하면 다음과 같습니다.

 // 모든 YouTube 동영상 찾기 // vimeo 및 기타 컨텐츠 의이 선택기를 확장합니다 var $ allvideos = $ ( "iframe [src^= '// www.youtube.com']"),

  // 유체 폭의 요소 $ fluidel = $ ( "body");

// 각 비디오의 종횡비 계산 및 저장 $ allVideos.Each (function () {

  $ (this)
    .data ( 'Aspectratio', this.height / this.width)

    // 하드 코딩 너비/height.removeattr ( 'height')을 제거하십시오.
    .removeattr ( 'width');

});

// 창이 크기가 커지면 $ (창) .resize (function () {

  var newwidth = $ fluidel.width ();

  // 각 비디오의 종횡비에 따라 모든 비디오의 크기를 조정하십시오. $ allVideos.Each (function () {

    var $ el = $ (this);
    $ el
      .width (Newwidth)
      .Height (NewWidth * $ el.Data ( 'Aspectratio'));

  });

// 페이지가로드 될 때 모든 비디오를 수정하기 위해 한 번 크기를 조정하기 시작합니다}). resize ();

로그인 후 복사