This is the documentation for concrete5 version 5.6 and earlier. View Current Documentation

Sizing videos to fit nicely within a certain area on your page(s) can be a tedious task, especially if you have many to display.

There's a quick and easy solution! It's called "FitVids.js".

FitVids.JS is a jquery plugin that makes it so all YouTube, Vimeo, and other embedded videos automatically scale to "best fit" within an area.

First.. you will need to download it.

Next, using an FTP client (or other way of uploading files), go to the directory for your currently enabled concrete theme. Go to the directory that contains your theme files. Create a new directory, and call it "js" (if it hasn't already been created). Upload the script to this directory. It should now look like this: "yoursite.com/packages/currenttheme/themes/currenttheme/js/jquery.fitvids.js".

Third, you will need to go to your header.php file (or where ever the header for your theme is kept), and copy / paste the following code into your header:

    <script type="text/javascript" src="<?php  echo $this->getThemePath()?>/js/jquery.fitvids.js">
</script>

Next, go to your footer, and copy / paste the following code (must be before the tag):

<script>//$(".columns").fitVids(); $(".container").fitVids();
</script>

NOTE: Notice the classes that are included here. These are the classes that the script will be applied to.

You can now copy and paste your embedded videos, and you will NOT need to modify the height / width of them! The script will do that for you!

Learn more about FitVids.JS here.

Loading Conversation