You are here

How to Embed Multiple Videos on a Page

This tutorial will tell you how to place multiple embedded videos in the body of a single page.  

Note:  Before you put a video in the body, we suggest that you use the "Video Link" field first.  that will put a video at the top of the page, and is an easier process. If you need additional videos on the page, keep reading.

What's an embedded video?  An embedded video is one that comes from an outside service on the web, like Vimeo or YouTube, as opposed to a video that you upload directly to the webserver.  Your video will be placed in what is called an "iframe".  An iframe is basically a webpage inside a webpage, like a little alien.  Here's how:

1. Get the video embed link.  In Vimeo or YouTube, we need the "embed" link for the video you want to embed.  This is different than the link that you would put in a browser.  

  • Vimeo.  In Vimeo, go to your video's page.  You will see a "Share" button below the video.  Click on that button and a dialog box will appear with three choices, "Link," "Send email," and "Embed."  We want the embed code.  You only want to copy the URL of the embed code, not all the stuff around it.  Select the URL only, and copy it.  (Tip: I find it a lot easier to grab just the link, and not the whole embed code, if I log into Vimeo and go to the Embed section, and click on the Embed Code button.)
    Embed code of a Vimeo video
  • YouTube. The process is the same for YouTube.  Go to the YouTube page of your video, click the "Share" button, then in the dialog that comes up, the "Embed" button.  The embed code will appear.  Copy only the URL, none of the stuff before or after it.

2. Edit your page.  Back in Drupal, edit the page where you want to place the video. Make sure that the "Text Format" dropdown below the Body box has "Full HTML" selected.   Inside the Body box, decide where you want to place the video and click there.

3. Place the video in an iframe.  Next, find the iframe icon, which looks like this:   Click on that icon.  That will bring up a dialog box which looks like this:  iframe properties dialog box 

In this dialog box, paste the URL from Vimeo or YouTube in the URL field.  Enter "100%" for the Width.  Enter "288" for the Height.  Leave everything else blank.  Click OK.  You could stop here and your video will look fine.  But you want it to look perfect, don't you?  So let's go to the next step.

4. Make it look good on devices of all sizes.  Now we are going to wrap your iframe in a container, called a "div," and give the container a class, a type.  Then, that container will automatically receive the styling that makes it look good on any size device.  Without this step, your video will look OK on a phone, for example, but not perfect.  For example, it might appear in a square box, instead of a long rectangular one, with some of the image cut off, although it will still play when you click on it.  So, let's fix that.  Just below the Body box, click on "Switch to plain text editor."  You will see the Body text in HTML.

Locate the line that begins with <iframe> (it may have a <p> in front of it; if so, replace the <p> with what you're about to type).  Right before <iframe>, add this text:

 <div class="iframe-container">

At the end of the line, right after "</iframe>" close the container with this text:

</div>

Your completed line should look something like this, except on one long line:

<div class="iframe-container"><iframe frameborder="0" height="288" scrolling="no" src="https://player.vimeo.com/video/411221808" width="100%"></iframe></div>

5.  Save and check.  Save your page.  Did your video appear?  Good, you're done.  If not, refresh the page, and it should appear for sure.  If not, or if it appears but looks funny, edit the page again, double-click on the box where your video is -- it will simply be a white box with "IFRAME" in the middle, and make any corrections to the URL, Width or Height.  Switch to plain text editor and check that you've entered the code right for the enclosing container.  Save.​

6.  Can I make my video iframe look more beautiful?  In a word, no.  Remember how an iframe is basically a webpage within a webpage?  That means that your Vimeo video has the styling Vimeo gives it and you can't change that.  Ditto YouTube.  Vimeo gives you a few options -- whether or not you can see the title of your video, the playbar, share links, volume control, etc.  You can change the color of the title.  You do these things by logging in to Vimeo and going to your video's page, then clicking Embed.  Can you change that ugly title font, or size?  Nope, sorry, they don't let you.  Your only option is to turn the title off.