Embed a responsive YouTube or Vimeo video

How to embed a responsive YouTube or Vimeo video

YouTube and Vimeo videos have fixed widths and heights by default. Since is a responsive website, this can create problems with different screen sizes and resolutions.

Users can make small changes to the YouTube or Vimeo embed code to make the videos responsive. Follow the steps below.

Step 1 -

Locate the YouTube or Vimeo embed code. It should look like the one below.

<iframe width="560" height="315" src="//" frameborder="0" allowfullscreen></iframe>

Step 2 -

Replace the width and height with 100%. Example below.

<iframe width=“100%” height=“100%” src="//" frameborder="0" allowfullscreen></iframe>

Step 3 -

Wrap the updated embed code with a new class.

<div class=“youtube”>

<iframe width="100%" height="100%" src="//" frameborder="0" allowfullscreen></iframe>


Step 4 -

Navigate to your page (homepage or document page), in the content widget, or document content area, click the "Insert Code Snippet" icon at the far right, second row.  Copy and paste the step 3 code with your video link into the snippet.  Click Insert Snippet.  You will see a grey 'placeholder'.  This is correct.  Click continue or save and publish your page.