How to Create a Video Page

How To  Tutorials  Last Updated: Time to Read: 2 minutes

This tutorial will walk you through how to create a custom video archive or feature page using the Layers Builder Widgets and the oEmbed option in the Content Widget.

Click here to see a finished demo of this Layout. 

This Layout takes 3 simple steps:

  • Creating a new Layers page
  • Adding a Slider widget as a custom Page Title banner
  • Adding a manual selection of videos in a Masonry layout with the Content Widget

If you already use the Rich Media option in Posts for video or audio blogging, you can create this layout using the Post Widget more simply. See How to Embed Audio or Video in Layers Posts for details.

  1. Go to LayersAdd New Page 
  2. Choose the Blank preset and click Select
  3. Name your page and Proceed to the Customizer
  4. Expand the Edit Layout section, then expand your page Body section
  1. Click +Add Widget and choose the Slider Widget
  2. Click Layout at top-right in the widget design bar and choose Full Width
  3. Click the Slider button in the design bar and uncheck the defaults. Set the Slider Height to 300.
  4. Add your desired Title and excerpt (optional) and choose the Text size and position using the Aa  button in the slide toolbar.
  5. Set the Background color or image as desired by clicking the first button in the slide toolbar

The following walks you through how to recreate the “video wall” layout shown on the demo link above. Use them as a guideline and then experiment with different options for other greta looking layouts!

  1. Click +ADD WIDGET and choose the Content Widget
  2. Remove the default widget title and excerpt
  3. Click Layout at top-right in the widget design bar and choose Full Width
  4. Click List Style in the design bar and choose Masonry. Uncheck “Gutter”.
  5. Click Advanced in the design bar and enter a zero ( 0 ) into all of the Padding and Margin fields.
  6. Expand the first default column and remove the default title and excerpt.
  7. Grab the share URL (specifically the oEmbed video URL) for your first video.
  8. Click the image-iconFeatured Media button in the toolbar  and paste the url into the Video URL field.
    • video-widget
  9. Click the columns-iconColumn Width  button in the toolbar and choose 3 of 12
  10. Expand the second and third default columns and click the red trash can icon at top-right to delete them. We will speed up your column creation process by using your first column as the template rather than edit defaults.
  11. Click +Add New Column 10 times to add 10 columns.
  12. Expand each column to edit the url to add a new video and select the Column Width. Below is a key for the widths of each column in our demo widget:
    1. 3 of 12
    2. 3 of 12
    3. 6 of 12
    4. 6 of 12
    5. 3 of 12
    6. 3 of 12
    7. 3 of 12
    8. 6 of 12
    9. 3 of 12
    10. 3 of 12
    11. 3 of 12

Result:

Videos   Kittn