After you've copied the iFrame embed code for the YouTube or Vimeo video, follow these directions to edit the code to embed the video directly your Sitecore page.

1. In Sitecore's Content Editor, navigate to the page you want to embed the video on. Click Edit HTML above the Body field.





2. Place the cursor where you would like to embed the video, and paste the previously copied iFrame code.

   
   
   

   Below are samples of YouTube and Vimeo codes. Note that they both begin and end with <iframe.....></iframe> tags.

   YouTube

   <iframe width="560" height="315" src="https://www.youtube.com/embed/iB-ubXo7LSs" frameborder="0" allowfullscreen></iframe>
   

   Vimeo

   <iframe src="https://player.vimeo.com/video/148427236" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
   <p><a href="https://vimeo.com/148427236">Drexel Video</a> from <a href="https://vimeo.com/digm">Drexel Digital Media</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
   




3. Delete the closing </iframe> tag from the code. Replace the arrows in the surrounding <iframe.....> tag with square brackets [ ]. The code should now look like this:

   YouTube

   [iframe width="560" height="315" src="https://www.youtube.com/embed/iB-ubXo7LSs" frameborder="0" allowfullscreen]
   

   Vimeo

   [iframe src="https://player.vimeo.com/video/148427236" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen]
   <p><a href="https://vimeo.com/148427236">Drexel Video</a> from <a href="https://vimeo.com/digm">Drexel Digital Media</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
   




4. Surround the entire code-block with <div class="fitVids"> and </div>.

   YouTube

   <div class="fitVids">
   [iframe width="560" height="315" src="https://www.youtube.com/embed/iB-ubXo7LSs" frameborder="0" allowfullscreen]
   </div>
   

   Vimeo

   <div class="fitVids">
   [iframe src="https://player.vimeo.com/video/148427236" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen]
   <p><a href="https://vimeo.com/148427236">Drexel Video</a> from <a href="https://vimeo.com/digm">Drexel Digital Media</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
   </div>
   




5. Accept the changes in the Edit HTML window. Save and display or publish the page. The videos will be embedded and playable directly on the page, as shown below.