Adding Videos to Pages

In this advanced tutorial, we'll show you how to display Youtube or Vimeo videos on your pages, but you can use this same method to add videos to your product pages as well.

Finale.png

In this example, we walk you through how to set up embed code fields, then we provide you with all the code necessary and explain where it goes. The coding is generic, you just need to copy and paste it in the right places and it will work. No changes necessary.

*Please note, this tutorial is provided as a starting place for experienced coders. We cannot provide support for your custom development efforts. If you're not comfortable coding, we suggest hiring a professional to build this for you. 

1.) Create an Embed Code field in Pages. 

This will hold the embed code that displays the video on your page. Note: in this tutorial we used the machine name "video", but you may enter what you want and it will work similarly.

_Add_Field.png

DO NOT Exclude this from display.

Video.png

Make sure to click Save New Field after creating it.

2.) Optional: Remove the <h3> tag in the Snippet editor

This code will now just display the video on any page if there is a video to show. Otherwise, nothing will appear.

Removed.png

3.) Get embed code from the video you want. 

In Youtube: Right-click the video playing. Then click "Copy embed code"

Copy_Embed_Code.png

In Vimeo: Click "Share" on any video the embed code is in the "Embed" section.

Vimeo.JPG

4.) Paste Code into any Page field. 

Back in Custom Fields, click "Search" and search for the page you would like to add the video to. Click Edit Custom Fields under the Operations category.

Contact_Us.png

In the "video" field, paste the video's embed code.

embeddio.png

Make sure to click "Save" after completion.

6.) Test your results. 

Now you will see your videos appear in the pages you want them to.

Finale.png