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.
I have multiple Dropzone on one page, and user can upload files or image. In my case is need to upload Pass Photo, Identity, Press Identity, Vaccine Certificate, Statement of…
Sometimes we need to change SSH port on git server, because client is behind firewall or for security reasons. For example, git server ssh run on port 443. So we…
Nginx virtual host traffic status module (Nginx Module VTS) has lot of usefull monitoring for your open source Nginx server. Nginx Module VTS also can monitoring upstream status and request.…
