Customizer: Adding Videos to Pages and Posts

Sarah Updated by Sarah

This article will walk you through how to embed Youtube and Vimeo videos into your pages and posts.

Youtube

Before going into the backend of your Placester site, you will first want to retrieve the embed code for the Youtube video that you’re looking to use. To start, go to Youtube, and pull up the video.

Underneath the Video title, click on the “Share” tab towards the right-hand side of the screen, and then click on “Embed”.

This will bring up an embed window, where you can view the code that you need. From here, you can simply click “Copy”, which will automatically copy the entire code to your computer’s clipboard.

Vimeo

Before going into the backend of your Placester site, you will first want to retrieve the embed code for the Vimeo video you’re looking to share. To start, go to Vimeo, and pull up the video.

If you hover your mouse over the video screen, you will notice that a couple of icons appear on the right-hand side of the video. From here, click on the paper plane icon.

This will then bring up a “Share this video” window. In the Embed section, you will be able to find the code that you will need. Highlight the entire frame, and copy the code to your computer’s clipboard.

Placester Dashboard

Once you have the embed code for your video, log into the backend of your Placester site. You can access your pages by going to Edit Site then clicking Pages on the customizer slideout.

Similarly, you can add the video to a blog post to your site from the customizer slideout. However, instead of clicking on the “Pages” tab, click on “Blog Posts”. You can learn more about creating new posts here, as well as how to edit existing posts by clicking here.

Adding an Embed Code

Within the page/post editor, you will notice a formatting bar located towards the top of the Page/Post Content section. From here, click on the video button.

You should then see a “Video Embed Code” window come up on your screen. This is where you will want to paste your Youtube or Vimeo code.

Important: Editing the Code

Before clicking on the “Save” button, you will first need to adjust the width code of the iFrame to display as width="100%". This will ensure that your video formats correctly to the page on both desktop and mobile devices.

For example, let’s say this is the code that you had just pasted into the “Video Embed Code” window:

<iframe width="560" height="315" src="https://www.youtube.com/embed/cZAf8Sx38hM" frameborder="0" allowfullscreen></iframe>

You will first want to click the lock button next to the width and height section. This will allow you to change with width without adjusting the height.

Then you will want to change width="560" to be width="100%" instead. After this adjustment, the iFrame should then look something like this:

<iframe width="100%" height="315" src="https://www.youtube.com/embed/cZAf8Sx38hM" frameborder="0" allowfullscreen></iframe>

Once you have edited this part of the code, click “Save” to embed the video to your page/post.

When you’ve finished editing the content of your page/post, click on the “Save” button, located on the bottom of the page/post editor. 

Need More Help?

If you still have questions about adding videos to your site, let our support team know at support@placester.com.

How did we do?

Customizer: Adding a Meta Description & Meta Title to your Home Page

Customizer: Adding Photos to Pages and Blog Posts

Contact Support