How to make Youtube video embed full width and auto height on responsive design

We have problem with embed Youtube video in responsive design.

This YouTube embed video does display a full width video, but it has an inappropriate height, so that the poster display is not perfect.

I have tried adding some CSS, but none of them are working properly.

How to fix Youtube Video responsive problem

Finally I found a Jquery plugin that can solve this problem.

FitVids.js is a lightweight, easy-to-use jQuery plugin for fluid width video embeds.

FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in our responsive web design.

This plugin work perfectly to embed Youtube video, Vimeo video.

Also works on Blip.tv video, Viddler video, Kickstarter video by adding it via a customSelector.

If we have element with class, for example div, simply use this plugin like below:

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

But, if we does not have any parent element, we also can use it.

$('iframe[src*="youtube"]').parent().fitVids();
// You can change the selector to suit potential video providers, or chain them if your customer is likely to use more than one provider

How about if we have a custom video player? itVids.js now have a customSelector option where you can add our own specific video vendor selector.

$("#thing-with-videos").fitVids({ customSelector: "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"});
// Selectors are comma separated, just like CSS

How to ignore a video using FitVids.js? You can slap a class of fitvidsignore on your object or container and your video will be displayed as it is defined.

If you’d like to add a custom block to ignore FitVids, use the ignore option.

$("#thing-with-videos").fitVids({ ignore: '.mycooldiv, #myviiid'});
// Selectors are comma separated, just like CSS

Finally, below is the result on our page using Bootstrap 5.

You can check this plugin on Github Page.