There are two ways to embed a video on your WordPress page. Using BUniverse, you can upload multiple video formats and share them on your website quickly and easily. You can also upload SWF video to WordPress or an AV directory and embed it on your WordPress site using SWFObject code.

On this page:

Use embed code from BUniverse (recommended):

  1. video-embed-plungeAdd your video to BUniverse if it isn’t already there. Give your video a title, description, categories, and tags — categories and tags help relate your video to other similar content and makes searching easier for visitors.
  2. Start playing your video, place your cursor over the playing video, and click the right mouse button.
  3. Select Copy embed code. If you need to resize your video or change any advanced embedding options, click on the YouTube link in the upper-right corner of the video and follow the embedding instructions from Google. Be sure to set the correct width for your embed — the height property will change proportionally to ensure correct aspect ratio to the original. If you don’t know what size your video should be, please review the page on finding dimensions of a web page element.
  4. Add or edit your WordPress page and then switch to the HTML view mode.
  5. Paste the copied code in the HTML view.
    If you switch back to Visual mode, you may expect to see your video. You won’t. You will, however, see a yellow box indicating where your video will show in your content. WordPress won’t display the actual video in the Admin/Dashboard view.
  6. Accessibility Tip — while doing this, add a title so blind and visually-impaired visitors know what your video is about. Add the title to your opening <iframe> tag while in HTML view. (Example: <iframe title="enter the title of your video here" src="http://www.bu.edu/buiverse/etc...">
  7. Use the Preview Changes button to view your page with the video.
  8. Click Publish or, if your page is already published, Update.

Upload to your site’s Media Library:

  1. Upload your video file to the Media Library. For instructions on how to do this, visit our Add a File article.
  2. Switch to HTML view mode when editing the page you want to put your video on.
  3. Copy the following code:
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script><script type="text/javascript">
    // <![CDATA[
    swfobject.embedSWF("/mysite/files/2011/07/mySWFfile.swf(path to file)", "myContent", "400", "300", "9.0.0");
    // ]]>
    </script><div id="myContent">Be sure to replace this text with the content you would like to display if a visitor can't view your video.<a href="http://www.adobe.com/support/flashplayer/downloads.html">Flash player</a> and JavaScript are required to display this movie.</div>
  4. Paste the video embed code in the HTML view and replace the italic text with the appropriate path, video width, video height, and any alternate text or content (images, for example) you would like to display if the client cannot play Flash video.
    If you switch back to Visual mode, you may expect to see your video. You won’t. You will, however, see a yellow box indicating where your video will show in your content. WordPress won’t display the actual video in the Admin/Dashboard view.
  5. Save a draft of your page or use the Preview Changes button if your page has already been published to preview your page with the video.
  6. Click Publish or, if your page is already published, Update.

Fix a broken video embed:

In Spring 2013 YouTube dropped support for one of the older video players used on BUniverse. If you discover an embedded video on your site that will no longer play, follow the instructions below to resolve the problem.

  1. Go to the page on your site that contains the broken video. Click Play (the video will appear stuck, as if it’s trying to play but won’t start). Click the Share link in the video window and copy the web address to the video on BUniverse; OR find your video directly on the BUniverse site.
  2. Start playing the video on BUniverse, click the Share link and copy the embed code.
  3. Edit the page containing the broken video.
  4. Switch to HTML view and locate the broken embed code.
  5. Select and delete all the code between (and including) the opening and closing object tags — <object> thru </object>
  6. Paste the new embed code in it’s place.
  7. Accessibility Tip — while doing this, add a title so blind and visually-impaired visitors know what your video is about. Add the title to your opening <iframe> tag while in HTML view. (Example: <iframe title="enter the title of your video here" src="http://www.bu.edu/buiverse/etc...">
  8. Preview your changes to ensure the video works as intended. (If you need to resize your video, follow the instructions in step #3 in the top section of this page.)
  9. Click Publish or, if your page is already published, Update.

Fix navigation drop-down menus that appear behind videos:

If your drop-down menus from the navigation bar are falling behind your embedded video, you need to slightly modify the embed code. This problem is usually seen only when browsing with Internet Explorer version 9 or earlier.

  1. Edit the Page that has the problematic video and switch to HTML view in the content editor.
  2. Find the video code within the content. It will either start with <object> or <iframe>. Depending on which method you’re using determines which code we’ll use to fix it.
  3. If you’re using <object>
    1. Add the following parameter to the code, among the other parameters:<param name="wmode" value="opaque" />

      Adding to the list of parameters on object embedded video players

      Adding the additional parameter to the list of other parameters for the object embedded video player.

  4. If you’re using <iframe>
    1. Add the following code to the end of the URL reference:?wmode=opaque

      Adding ?wmode=opaque to the and of the video URL in the iframe

      We’ve added ?wmode=opaque to the end of the video link URL.

  5. Preview your Page before saving to make sure these changes worked.
  6. Save/Update your Page to make the changes live.