Video IFrame Template | Axero Documentation

Create a template for the IFrame Widget that's ideal for displaying videos from providers like YouTube and Vimeo.

Add Template

1. Click the gear icon > Page Builder > Templates.
2. Click Add a new template.
3. In Template name, enter Video IFrame.
4. In Widget type, select iFrame.
5. In the editor, paste the following code.

   <div class="axero-widget {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
   
       {{#if ShowWidgetHeader}}
       <div class="axero-widget-header">
           <h3>{{{WidgetTitle}}}</h3>
       </div>
       {{/if}}
       
       <div class="axero-widget-content axero-iframe-video-wrapper">
         {{{Contents}}}
       </div>
       
       {{#if ShowWidgetFooter}}
       <div class="axero-widget-footer">
           {{{FooterHTML}}}
       </div>
       {{/if}}
       
   </div>

6. Click Save Template.

Add CSS Overrides

1. Click System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Style for Video IFrame template*/
   .axero-iframe-video-wrapper {
       position: relative;
       padding-bottom: 56.25%;
       height: 0;
       overflow: hidden;
   }
   
   .axero-iframe-video-wrapper iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }

3. Click Save CSS Overrides.

How to Use the Template

1. Add or edit a Page Builder page in Control Panel > System > Page Builder.
2. Click the Layouts tab and add a layout onto the page.
3. Click the Widgets tab.
4. Drag a IFrame widget onto the page.
5. On the IFrame widget, click the gear icon > Edit properties.
6. Update the widget Title.
7. Set the Width and Height to 100%.
8. In Iframe URL, enter the video embed URL.
   • For a YouTube or Vimeo video, you can get the embed URL by copying the URL in the embed code. (e.g. https://www.youtube.com/embed/_VJuZZoptYU or https://player.vimeo.com/video/46832815.)
9. Click Template.
10. Select the Video IFrame template.
11. Click Advanced.
12. Uncheck Show header. (Optional)
13. Click Save Widget.
14. Click Publish changes.
15. Click Go to page.