Now that we’ve talked about how to add images to your WordPress website I want to talk briefly about how to add video and audio to your pages.
HTML5 Simplifies the Process
With the advent of HTML5, it has become much easier for you to add video and audio to your site and generally does not require any kind of special tool or special add-on. You’re not going to need a plugin for this or anything like that. You can simply insert either video or audio directly into a page.
However, because this change is new there is a lot of misunderstanding about what the right kind of video link is too to use when you’re inserting into a page.
Don’t Use Iframes With HTML5
I’m going to show you an example on this home re-modelers page. I have this YouTube video that I want to insert into the page. Ordinarily what you would do is come to the video and go to the sharing button. There are three options here: sharing, embed and email.
What many people do because they think this embed is important is they go there to get this iframe code. Then they use the settings here to choose the size of the video they want inserted. Well, this is the old way of doing it.
The reason why it’s the wrong way is because it prevents the videos from being attractively responsive. They can be theoretically responsive but they get distorted out of shape and it just doesn’t look good. So, you don’t ever want to use an iframe embed and you don’t ever want to set a size here.
Use the URL
What you want to use is the link that is this http link, the URL. Just copy that and come over to your page. Place your cursor where you want to the video to show and paste the link. I’ve just done this and you can see it’s actually resolving as a video directly in the page editor. Let’s update this and view the page. Here’s the video.
Where Should Size Be Set?
The right place to set the width or the size of a video in HTML5 or at least with an embed like this in WordPress is to set the embed width which is a function in the theme.
I’m surprised to see that many themes do not give you that chance but as you’ll see here in a later session that Agility skin gives you the opportunity to set the ideal embed width. When the screen gets smaller it is just going to shrink right down to the right size. So it’s not going to look funny when you embed the video.
In fact, I’ll just show you this right now. When you embed a video Agility has this area on the page called Agility Page Details. And one of the things you can do is put a checkbox in responsive video and that will make this embed flex in an attractive way regardless of the size of the viewing window.
View the Results in the Responsinator
Let’s come back here and look at this page. We can simulate this in a website called the Responsinator and we can just paste the page directly into it. This is what it would look like on a phone. There are no black bars, no distortion of size. The same thing here with the next size up. It perfectly expands and contracts to fit the appropriate size of the device regardless of what that device is.
So that’s the that’s the way in which video is embedded and is made responsive inside of Agility. But regardless of what theme or skin you were using you would use this video embed. Unless, of course, it’s not an HTML5 theme you just insert it like that.
Now if it’s not an HTML5 theme, if it’s an older theme that hasn’t modernized like Thesis 1.89 or a similar older version of Genesis then it obviously won’t work. But in any good modern theme that should work just fine.
And it’s the same way regardless of what hosting system you’re using. The same thing is true with Vimeo. Let’s say I wanted to embed this. Again, I would not take the iFrame. I would grab this link to embed this video and then paste that URL. And it shows up just like that because we just used that link.
Inserting audio is very similar to this. Let’s go back to our dashboard and then to Pages. We’ll edit the front page. Let’s say we want to insert audio here. Just give yourself a space here, select add media and go to upload files and select your audio file.
I’ve got an MP3 here. I’ll grab this one here. And I uploaded this just like you would any other media. And you can either put a link in there to the media file or link to attachment page but what you really want is just to embed the media player. Insert that into the page.
It takes a second. There it is. So update and view the page. There’s your audio. So it’s very simple to insert video and audio in an HTML5 website these days because of the changes in HTML5. Never use an iFrame always use just the raw URL.