Creating multiple sized videos in ExpressionEngine using Vimeo

Question

I am a beginner in ExpressionEngine (and other code languages for that matter). Anyways, I am creating a video tutorial site, I have my ExpressionEngine site set up so I have categories in one channel. These categories filter content to the corresponding page. However, I want my site to have a featured video, which will be the newest posted video. Once I publish a new video, I want it to take the main stage and push the previous video to a smaller size. I am using Vimeo as a video host so all videos will be on Vimeo.

Here is my code in my main page for sorting new from old content

{exp:channel:entries limit="10"}
<div class="main_feature">

{if count==1}
<div class="video_large">
{/if}

{if count !=1}
<div class="video_small">
{/if}

<h2>{video_tutorial_title}</h2>
{video_tutorial_link}
{video_tutorial_summary}


</div>
{/exp:channel:entries}

I have them filtering to two different styles. My CSS looks like this...

.video_large {
    height: 960px;
    width: 640px;
}
.video_small {
    height: 180px;
    width: 320px;
}

When entering my new content/videos. I have been using the embed code from each video and removing the height and width from them thinking the div would then resize it. It looks as if it resized all the videos to 180x340 but for the newest video it looks like it created a 640x960 div, the video just doesn't fill the entire div. I am hoping I won't need any plug ins or anything like that. I am hoping its just something basic I am overlooking. Any help is greatly appreciated. Thank you!

Answer 1

I've done multiple sizes responsively using the Zurb Foundation framework, which has an excellent flex-video class to allow a single video to simply fill whatever container you put it in. Then if I want to present it differently, I don't have to do anything as far as the video embed code is concerned, I just wrap it differently. I also rather like DevDemon's Channel Videos add-on, which like Antenna, is a fieldtype that allows you to select a video from YouTube or Vimeo, and the add-on handles the embed for you. It also includes a CP settings panel to centrally setup default preferences for each service, such as video size and other player options.

Answer 2

You could use a small plugin to make them all fit here

Answer 3

I know you don't want to use a plugin, but just for info, there is a great free plugin Antenna which makes embedding YouTube/Vimeo videos at any size very easy - you just supply the URL. You also get access to the image for each video which can also be handy for using thumbnails to link to video embeds in pop-ups etc.

Answer 4

Since you are using videos coming from vimeo and using iframes embeds, I would suggest you have a look at this technique: detailed article on A List Apart.

The technique is usually used in the framework of responsive sites but it will help your videos fill any container you put them in while preserving their aspect ratio.

Another tool that might help you is fitvid.js by Chris Coyier and the Paravel folks.

I would also advise you to keep your embed code at the template level, leaving only the video id as a custom field.