Insert a video

Summary

How to insert (or embed) a YouTube or Vimeo video into your Seattle U website

Step-by-step

Use a video content type

The best way to add a video to your Seattle U website is to use one of our video content types.

  • You can add a video to Zone A using our Video (embedded) content type.
  • You can add a video to Zone B or C using our Video (popup) content type.

You'll find instructions for using both video content types in the Content Type Encyclopedia.

Embed a video using the text editor

Screen shot of how to insert a video using the text editor

It's not always possible to use a video content type to add a video to your page.

You can also embed a video through the TinyMCE text editor, in a "Primary Content" content item.

As with our video content types, you cannot upload your videos directly into TerminalFour. Therefore, you must upload your video to YouTube or Vimeo first before adding your video to your Seattle U website using one of these content types.

Click Insert > Video then select either YouTube or Vimeo.

Then in the pop up window, there are three fields to fill in:

Screen shot of how to insert a video using the text editor showing required and optional fields

Then click Ok.

Embedding responsive video

The problem with directly embedding a video through the text editor, instead of using a video content type, is making sure that the video is responsive - meaning that it works and looks as good at mobile sizes as it does on tablets and desktops.

It is important that the width of the video vary in size to match the size of the user's device.

We can do that by specifying that the width of the video be "100%" rather than giving the video a fixed width.

Unfortunately, the Tiny MCE plugin which enables us to embed video will not accept "100%" as valid in the width field in the pop up window.

Therefore, after you insert the video into the text editor, you must make the width change directly in the source code.

  • Under the Tools menu, select Source code.

Screen shot of how to access the source code in the text editor

  • Find the iframe tag in the source code.

Screen shot of how to embed responsive video by editing video width in the source code

  • Change the width to 100%
    • <p><iframe src="https://player.vimeo.com/video/256697947" width="100%" height="281"></iframe></p>
  • Click Ok to close the source code.
  • Then save your content item.

Now your video will work just as well for your mobile users and it will for your desktop users.