Embed Youtube or Vimeo videos into a page

This article will show you how to use the TextBox and Custom HTML elements to embed iframes.

We’ll start with the TextBox element first. So the first thing we need to do is to add the element to the page: http://screencast.com/t/2uDN1Rwk , next we’ll have to switch to mode TEXT, in order to add the needed html: http://screencast.com/t/oNtCxsDeq.

Next, we’ll go and get the URL of the page we want to embed, in this case it will be the URL of a video. If you want to embed a Youtube video, then you will need a special URL, which you can find if you click the Embed tab that’s right below the video, as you can see in this image: http://screencast.com/t/2w7UC8oa. Copy the text as shown in Step 2 and paste it into the TextBox element: http://screencast.com/t/7n1vHJVTZeoo. After you save and close the element, it should look like this: http://screencast.com/t/Ejqywe6CJhh

As you can see, there are quite a few link parameters you can use to customize the video’s functionality http://hogash.d.pr/1daep :

  • Modest branding: &modestbranding=1
  • Disable controls: &controls=0
  • Autoplay video: &autoplay=1
  • Loop video: &loop=1
  • Autohide branding: &autohide=1
  • Hide various info: &showinfo=0
  • Hide related videos at the end: &rel=0

For Vimeo videos the process is quite the same. Go to https://vimeo.com, browse for the video you want to embed, click the Share icon and copy the code from the Embed textarea: http://screencast.com/t/LkgVIMswg. Add it into the TextBox and the result should look like this: http://screencast.com/t/dtfnIfkAbhQ . In regards to parameters (eg: autoplay), they’re a bit limited and just a few ( http://hogash.d.pr/12t3z ):

  • Autoplay video: &autoplay=1
  • Loop video: &loop=1
  • Hide title: &title=0
  • Hide Video uploader: &byline=0
  • Enable portrait: &portrait=1

The Custom HTML element, doesn’t provide a Visual or Text mode, so the html you’ve copied should be pasted in there as it is: http://screencast.com/t/6ntowwLEd. You can also add more attributes to customize it, as you can see in the image.