This article will walk you through you how to embed Youtube and Vimeo videos into your pages and posts.
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.
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 iframe, and copy the code to your computer’s clipboard.
Once you have the embed code for your video, log into the backend of your Placester site. You can access your pages tab directly from your Dashboard by clicking on either of the “Edit Site” links.
From here, you can access your pages by clicking on the “Pages” tab, located underneath your site’s title. You can learn more about creating pages here, as well as how to edit existing pages by clicking here.
Similarly, you can add a blog post to your site directly from your Dashboard by clicking on either of the “Edit Site” links. 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 “Insert” 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 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 “Insert” 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 firstname.lastname@example.org.