Reserve your spot now!

Lara Kroeker Interactive

Getting into Bed with Video

I’ve been focusing on video stories lately.  I wish that there were not so many new things to learn and I could just rest easy but alas, things keep changing!  Damn you web.  In this post I am going to focus on embedding a video inside a WordPress page.

The two most popular hosting platforms today are YouTube and Vimeo. They’re both great, but there are some big differences between them, and it’s important to know project goals before you choose a platform because that will guide you to YOUR right answer. You can read about it in one of my previous blog posts.

Embedding a video in WordPress is easy because you can just add the URL (ie: https://vimeo.com/ 242165385) without having to copy and paste the embed code. But this only works if you don’t want to control the size and options (hint: you always do!). In that case, you will need the embed code.

Embed code looks like this:

<iframe src=”https://player.vimeo.com/video/240430057?title=0&byline=0&portrait=0″ width=”1280″ height=”720″ frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

To get the embed code in vimeo:

A. Click on share in your video and you will see options pop up
B. Click the text that says show options and choose your preferred settings (loop, size, color, byline, etc)
C. Copy the embed code to your clipboard
D. Paste it in your WordPress page using the text (html) editor (not the visual one)

Notice that you can change the width and height in the code but keep your proportions in mind otherwise your video will be squishy and that’s ugly.

…VOILA!  A video that spans the width of your column.

YouTube works similarly (you click share, copy embed code and then paste it into your WordPress page) but don’t be alarmed if the options are different, just look around for the embed code, it’s there!

Vimeo is my preferred platform so I know it best. If you want more options in Vimeo you will need to upgrade to a premium account and then change your settings. I have a preset that I use to get rid of all the clutter (Watch, Add to Collection, Like, Vimeo Branding, etc). Nobody likes a dirty room. PLUS, if I make a mistake AFTER I upload, which I always do, I can replace it rather than add another.

Both platforms keep changing what you can and can’t do (especially Vimeo) based on your account level, but it’s totally worth it for me.

Sometimes you just have to use HTML5 video instead of YouTube or Vimeo. It’s a bit more complicated than just embedding a file into a page, but a girl’s gotta do what a girl’s gotta do!

In a nutshell you have to:

  1. Convert your video into 3 different formats: OGV, WebM and MP4 which you can do here: https://convertio.co/files/
  2. Upload the via FTP to your server
  3. Point to that URL to reference the videos.

In case you haven’t already figured out it’s way easier to use youTube and Vimeo!  So have fun with your video and get to it.

Our favourite projects