Build Your Own Business Website header image

Adding Videos to your Pages

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that you’ve got a good grasp of how to add images to your WordPress pages and how edit those images, the next thing I want to talk about is inserting videos into your pages.

Once upon a time before html5 was fully supported and really before mobile devices were so huge, there were a lot of competing ways to display videos on a website. All of those competing ways still exist. For example, you can still use a flash player to play a video. There are plenty of player systems out that you could still use, however, you don’t actually need to do any of that.

Displaying Video on HTML5 Themes

Now all you need to do to show a video, as long as your theme is html5, is to provide a URL. There are some themes that are not html5 but as long as your theme is html5 if you provide the URL of the of the video, then it will show up on your site. In fact, the video will show up in your editor. Let’s take a look let’s take an example here.

Use URL Not iFrame

This video here is that Mitchell and Webb look, one of my favorite British comedies. What many people still do is click on the share and then come over here to this embed code and get this iframe code. Well, that’s actually not the right way to embed it any longer in html5.

YouTube Example

The way to embed it is to use the share and then just grab this URL. You copy that code and we’ll come over to a page. Let’s edit our page here. Give yourself a space, paste it there and now you can see it actually turns it into the YouTube video. Just automatically. If you update and we view the page, now you’ve got a player you know automatically.

Vimeo Example

That same thing works with vimeo. Again we’ll go to one of these Vimeo videos and go to my share buttons. You’re not going to use the embed, you’re going to use the link. Come over to your page, paste the link and now you have the Vimeo video. Let’s update the page and the video shows up.

I’ll show you my BYOB typical preset. My typical presets have changed, it looks like. We want default HD, save those changes and that’s what it should look like.

Now when I go get my embed code, it’s going to show me this iframe which is wrong. I just need to refresh this since I changed the settings. Interestingly, the way this theme is set up it sets a height and a width for the video which ends up with a black bar here. It is assuming a 4 x 6 size which is I think a poor assumption but that is part of this theme when you embed this.

In my Agility Skin you can actually set the size that you want the media to be shown at as a default. But I’m kind of disappointed in this 2017 theme since it doesn’t really support a responsive video very well. That’s odd because it does support a video header.

Insert Video from Video Library

Anyway, the third way you can insert video is from the video library. Maybe this theme will give you more control over the video if you do it that way. It looks like I can only upload a video that 64 megabytes and that is not a very big video. So I’m going to go to Dropbox and Videos – and choose Customizing Genesis Like a Pro, Using Custom Fonts. I’ll upload the public one here.

Here’s the video and the embed is going to be just the embedded media player. We can insert that into the post. And with this method you can see when it comes in, it doesn’t have these black bars. It comes in at exactly the same size. Now if I do that, can edit this? There is that. Okay, it looks perfect right there right but it doesn’t look perfect here because of the way the theme is implementing external video embedding although it turns out perfectly here.

So they’re making their embeds 4 x 6 and if you embed 16 x 9, this theme requires you to be a programmer to fix it. There are settings that you could add to this to fix that but it’s not particularly friendly. If you wanted to use this theme what you’re going to do is rather than using this direct embed method, you’re going to use some other kind of responsive media embed system.

Now there are lots of themes that automatically, out of the box, support responsive video like Agility does and Carta does. I’m sure there are other Thesis skins that support responsive video out of the box as well.

If video is important to you and using the HD configuration of the video is important to you, then you either want to learn how to program in WordPress so you can reset these media settings or you want to choose a different theme.

0 Comments… add one
0 comments… add one

Leave a Comment