Adding an embedded YouTube video to your WordPress pages and posts on a Locally site is nearly as simple as adding an image.
The first step is to get the image you want to display for the user to click on, this could be a still from the video or anything else you fancy. You may want to embellish the image with a ‘play now’ type of button, using your favorite image editor.
Here are a couple of play buttons you could use. Right click and select ‘save image as’ on one if you want to download it.
Then use your favorite image editor (we like paint.NET, it is free and well supported, you should be able to find the download here )
You can see it all in action on a video we put together using the techniques described below.
So first you need to prepare the image that you will use as the still from the video. you could use a screen grab of the actual video or anything else that is relevant, and then overlay your ‘play button’.
Then using the standard WordPress ‘add media’ button, upload your image and put it in your post or page where you want it to be, just like any other image.
Next you need to find your YouTube video and its ’embed’ code, you can find this under the video, if you click on the ‘share’ link and the ’embed’ link. We don’t want the whole ifra
me code, just the URL, copy that and go back to your WordPress image editor and replace the link. What you are looking for is something like ‘www.youtube.com/embed/CbtGMqLZUdA’ and you put an ‘https://’ at the front to give you ‘https://www.youtube.com/embed/CbtGMqLZUdA’
There is one more thing that needs to be done to the link, essentially to ensure the video plays when it opens up and runs in HD. We need to add “?rel=0&wmode=transparent&autoplay=1&hd=1” to the end of the URL.
So the final link you will have is along the lines of ‘https://www.youtube.com/embed/CbtGMqLZUdA?rel=0&wmode=transparent&autoplay=1&hd=1‘ except that string in the middle will be different and should be your video’s id.
The last step is to go to the ‘advanced settings’ tab of the image editor and scroll down to the ‘advanced link settings’ and give the ‘CSS class a value of ‘youtube’.
Save the image and update your post and page, then view it and check it all works, if you got it right the video should pop up and run when you click on the image.
(note to WordPress user that are not using Locally, this won’t work for you without a couple of technical changes to your WordPress theme)