Embedding a Responsive Video

By default, when embedding videos from popular platforms like YouTube the video will not look good on all screen sizes. Use these instructions to make sure when you embed videos, they will be responsive and look good on all screen sizes.

Step 1 - Add a Div

With your cursor selected where you want to insert the video,
select Format > Blocks > Div.
You should see a dotted line surrounding your cursor.

visually showing step 1 instructions

Step 2 - Set the Div to be Responsive

With your cursor inside the dotted lined box,
select Format > Custom > Responsive Video.
You should see that the dotted box expanded in size.

visually showing step 2 instructions

Step 3 - Insert the Video

Go over to YouTube to the video you want to embed.
From the video page, select the Share+ button, select the embed tab.
Select how you want the video to appear, then Copy the embed code snippet.
In Cascade, make sure your cursor is still selected in the dotted lined box.
Select the Video button in the Toolbar.
Select the Embed Tab.
Paste the embed code, and click OK.
You should now see the video within the dotted lined box.

visually showing step 3 instructions

Step 4 - Preview Draft

With the small video within the dotted lined box,
Click Preview Draft.
The video should look good, and when you adjust your screen size, the video size should adjust to match the smaller screen sizes.

visually showing step 4 instructions