유체 너비 비디오

오늘날 반응 형 및 유동적 인 웹 레이아웃 시대에는 완벽한 조화를 방해하는 미디어 유형이 있습니다 : 비디오. 웹 사이트에 비디오를 표시하는 방법에는 여러 가지가 있습니다. 비디오를 호스팅하고 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 {}

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

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

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

이러한 제한 사항 중 하나가 귀하에게 적용되면 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 ();

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

Fitvids.js는이 모든 크기 조정 작업을 처리하는 것 외에도 모든 비디오를 통해 루프를 사용하고 종횡비가 활성화 된 HTML 래퍼와 필요한 CSS를 추가합니다. 이것은 창 크기 조정 핸들러에 바인딩 해야하는 것보다 훨씬 효율적 입니다!

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

요즘 jQuery는 더 이상 인기가 없습니다. 다행히 Dave에는 바닐라 버전이 있습니다 (자체 제작 CSS가 필요).

1. 실제로, 달리 명시되지 않은 경우, 모든 브라우저는 iframe, 캔버스, 포함 및 객체 태그를 300 픽셀 × 150 픽셀로 렌더링합니다. 이것이 UA 스타일 시트에 있지 않더라도.

출력은 원본 이미지와 그 형식을 유지합니다. 텍스트는 원래 의미를 유지하면서 흐름과 가독성 향상을 위해 논의 및 재구성되었습니다.

위 내용은 유체 너비 비디오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!