Add YouTube Video to PEA Page

You must be logged into the Petit Site. Read through once please, this is in two parts.

  1. Go to the Page or Block you want to EDIT and click EDIT or CONFIGURE
    (Do this in a separate Browser Tab then the YouTube video Page.)

 

WYSIWYG:

  1. Click the Source Button
  2. This code example is to show you what a final video embed in the wysiwyg will look like.
    <div style="width: 100%; clear: both;">
          <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/qQ3NrkZDJXo" style="margin: 0 auto; padding: 20px; text-align: center;" width="560"></iframe>
    </div>
  3. You can copy this block of code to paste into the wysiwyg and then to past the embed code into...
  4. <div style="width: 100%; clear: both;">
         <!--  PASTE EMBED CODE HERE  -->
    </div>

YouTube:

  1. Click on the video you want to embed into the petit site. You need to end up on the video page in YouTube.
  2. On the YouTube page for the video you want to embed, click on the Share button.
  3. When that pops up you want the <embed> button.
  4. Then you can just click the COPY link in the lower right of the popup window.
  5. Paste the embed code you copied into the wysiwyg and replace this string
  6. <!--  PASTE EMBED CODE HERE  -->
  7. Save your Page or Block and test your changes.
  8. Viola!

Change Width & Height

  1. To change the width and height to be the same as the other videos - just change the width and height -- see code below for example. 
  2. (Note: The other video sizes we like are set the same as YouTube default. So you shouldn't need to edit the width and height.)
  3. <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/qQ3NrkZDJXo" style="margin: 0 auto; padding: 20px; text-align: center;" width="560"></iframe>