Embedding a YouTube Video on a Page, Blog Post or Event

Embedding a YouTube Video on a Page, Blog Post or Event

The process for adding a video to a page, blog post or event is basically the same, but with a page, you'll need to have a content block widget present in order to add the video.

First, a page or blog post/event must exist. In the case of a page, there must be a content block on the page.

These instructions are assuming you already have a page or blog post/event started.


  • On the YouTube video page, click the "Share" button.

      
      
  • A window will pop up with some sharing options. Click the "Embed" option.

      


  • You'll now get another window that shows you the video along with some HTML code.

    All you have to do here is click "COPY" at the bottom right of that window.

      

      The code is now copied to your clipboard.

  • Now, go to your chapter website dashboard and navigate to the page or blog/event post where you'd like to add the video.

Embedding on a Page

1.  Drag a content block onto the page if you have not already.

2. Click "Create content" or "Edit."

 

3. Next, click the HTML button in the top right corner of the widget.

      

4. Paste the code you copied into the content block.

      

5. You an either save this right away, or switch back over to the visual editor if you need to add some space to the top and bottom of the video, or add additional text, images, etc.

      

When you're finished, click "Save" and the video will now be on the page.   If you don't need to do any more editing, you can publish the page.


Embedding in a Blog Post or Event

Create a new post, or click on an existing post to edit.

Click on the "HTML" link at the bottom of the content area.






Paste the YouTube embed code into the content area.



You can then switch back to the other view by clicking "Design," and you'll be able to edit or add more content to the post.



When finished, save as a draft, publish or schedule to publish in the future.

Advanced Tips

With the basic steps above, you will insert the video using the default settings YouTube has chosen, and most of the time that will work fine, but if you are not happy with the size or position of the video, you can make some easy edits to customize it. 

These options work best when the only thing inside the content block is the YouTube video.

Display the video full-width

If you would like the video to display larger to span the width of the content area on a page and be fluid, go into the HTML and change the iframe width to 100%.



This will case the video to always occupy the most space possible from side to side, and the width will be fluid, so on smaller screens or windows, the width automatically adjusts with the page instead of being fixed.

If the height is not to your liking, you can change that too just like you changed the width, but the height needs to have a set value. In our case, if it's set to 100%, it will only occupy a 150px high area.

The default height of 315px works fine most of the time, but 480px also works well for most users.

Centering the Video

If you'd like to center the video, the easiest way to do this is by using grid widgets.

First, flip over to the Layout side of the editor.




Drag either a 2+8+2 or 3+6+3 grid wiget onto the page depending on the size you'd like the video to be.





Go back to the content side and drag the content block containing the video into the large center column.

You may have to fine-tune the height to get the desired look.



In this case, the width of both videos are set to 100%, but the top has a height of 250, and the bottom has a height of 300.

Video






    • Related Articles

    • Locked Page, Event, Blog Post, etc.

      If you see a red lock icon on a page or other content item, that means another user is currently working on it, or they locked it accidentally by closing the browser or backing out of the item without publishing or clicking the “Back to ...
    • Text With Video

      This widget will create a content area with an video from YouTube, a heading, a descriptive paragraph and CTA button.   ​   After dragging the widget onto the page, click the Edit button  in the upper-right corner of the widget.   You can now ...
    • Video: YouTube Video Embed

    • Video: Blogs - Create a New Blog, New Blog Post, Edit Posts, Display Blog on a Page

    • Edit a Blog Post

      On the Posts page of a blog, you can open a blog post for editing in one of the following ways:   Click the blog post you want to edit. Click the Actions link of the post. From the dropdown list, click Content. The Edit a post page opens.   Edit the ...