markdown 流体宽度响应视频

Posted 2021-05-05

(function($) {
  $(document).ready(function() {
    var $allVideos = $("iframe[src*='//player.vimeo.com'], iframe[src*='//www.youtube.com'], object, embed"),
    $fluidEl = $("figure");

    $allVideos.each(function() {

      $(this)

        // jQuery .data does not work on object/embed elements
        .attr('data-aspectRatio', this.height / this.width)
        .removeAttr('height')
        .removeAttr('width');
    });

    $(window).resize(function() {
      var newWidth = $fluidEl.width();
      $allVideos.each(function() {
        var $el = $(this);
        $el
          .width(newWidth)
          .height(newWidth * $el.attr('data-aspectRatio'));
      });
    }).resize();
  });
})(jQuery);

Below is the (slightly adapted) script I got working on a Radicati site: 

Just enclose the oEmbed field in `<figure></figure>` tags and the video will automatically resize to fit. Ex:

```twig
<figure>
    {{ post.get_field('video') }}
</figure>
```

Make sure the javascript file is either concatenated into your main site.js or is enqueued or whatever needs to happen (depends on how your site is organized).


Note: It looks like there might be a more recent version of this fluid-video project at https://github.com/davatron5000/FitVids.js

The easiest method is if you're using Bootstrap (which we nearly always are). Bootstrap has responsive video classes built in. Setting class=“embed-responsive embed-responsive-16by9” works for YouTube videos, which are all widescreen. Also available are 4by3 (Fullscreen) and 21by9 (Cinematic Widescreen). This method is nice in that it doesn’t require javascript; it’s all css-based.