??? ?? ? ? ??? ? ? ???? ???? ??? ??? ???? ??? ??? ???? : ???. ? ???? ???? ???? ???? ?? ??? ????. ???? ????? 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 ??? ????? ?? ?? ??? ?????!