As we have previously discussed in "Why use video on your website?", that video is a very powerful media to have on your website as it keeps your users involved and increases the engagement.
So you have listened and created a company video that you would like to include on your WordPress website but how do you go about that and how to make it look right?
Posting your video to YouTube
- Log into your YouTube account
- From the top of the screen select "Upload". This will take you to another screen where you will have the following options:
- A "drag and drop" section to place files from your local storage (By clicking in this section you can also select file manually)
- Privacy settings:
- Public ~ Everyone will be able to search for the video by title, description, etc
- Unlisted ~ Everyone has access but will need a direct link to find your video and it will not show in search (Note: This is how we post clients videos that are not to be viewed on our YouTube channel)
- Private ~ Your video will only be accessible by users that you specify.
- When the file starts uploading you then have the options to change the:
- Privacy Settings
- Once the file has fully uploaded you then have numerous options to edit the video by adding an audio soundtrack, add video enhancements, etc but this is beyond the scope of this post.
Simply Embed the URL (Web Address)
WordPress has been programmed in a clever way that if you place a YouTube URL within a post this will automatically embed the video with all options enabled. This is a simple approach and will get you a video showing on your page. Note: Be careful that the url is posted as text and not a hyperlink as this will cause the link to show and not the video.
If you are wanting to do something a little more creative then carry on reading the options below.
Embed a YouTube video in a WordPress site using a shortcode
Further to the above WordPress can embed a video by using a shortcode in the form:
Embedding the video using the shortcode is the same as the embed code that is available directly under the video when viewed on YouTube.
Customising your embedded video
When you add the above code the video will set to the area available on the webpage but there are times when you would like to customise some of the features. This is easy to accomplish with the use of parameters (a little bit of code) added to the url (web address). These can be combined to achieve the result that you would like.
- Width ~
&w=320~ This is a pixel value for the width of the video. This example would give a width of 320 pixels
- Height ~
&h=240~ This is a pixel value for the height of the video. This example would give a width of 240 pixels
- Hide Related Videos ~
&rel=0~ As standard when a video finishes YouTube overlay a grid of related videos that you may be interested in; This example will stop that happening so that at the end of the video you will just be shown a play symbol
- Start Time ~
&start=75~ This is a seconds value for the start time of the video. This example would start the video 75 seconds from the start
- Finish Time ~
&end=150~ This is a seconds value for the start time of the video. This example would start the video 150 seconds from the start
You can specify as many of these as you want, with each added to the end of the URL, to achieve to the right look for your site.
eg. "youtube.url"&w=320&h=240&rel=0&start=75&end=150 would give you a video that has a width of 320px, a height of 240px, will start at 75 seconds, end at 150 seconds and not show any relevant videos at the end.
But this still leaves one last problem... The video is still showing the full controls; but this is easily overcome
Embed code direct from YouTube.com
To be able to fully customise the viewing experience we need to get some code directly from YouTube.
As shown on the image to the right, when you view your video on YouTube, you will see the sharing options direct beneath the viewing pane. Initially the "About" tab is selected, which we need to switch to "Share" then from the options that appear we need to select "Embed". This gives us the start of the code to get rid of the controls.
Please note the privacy-enhanced mode option, which for the YouTube help states "Enabling this option means that YouTube won't store information about visitors on your web page unless they play the video."
Once you have copied the embed code into your WordPress site this gives us the chance to add
&controls=0 which will remove the controls from the bottom of the video.
Congratulations you have made it
You have just learnt how to embed a YouTube video in a WordPress site
- How did you find the process?
- Did you get stuck anywhere?
- Do you have any further tips to help improve the process?
- Let us know in the comments below
If you would like further reading you can find info here:
- YouTube Embedded Players and Player Parameters
- WordPress.com ~ [youtube] embeds a YouTube video. » Full instructions
- WordPress Codex ~ Embeds
Saturday, April 12, 2014