Adding videos to a page or adding a video page

 

How to add a video page on your website or to add a video as a WebsitePageItem on the home page

FOR QUANTUM AND ZEPHYR TEMPLATES ONLY

You may want to add a WebsitePageItem to your home page to show off a video relating to your Estate Agency or a How To video that is industry specific. To do this firstly you’ll need to create the WebsitePageItem, and then you will need to add it as an Item to your home page as you would any other item. 

Create a new WebsitePageItem:

  • Log into Webdadi and select Configuration from the left-hand menu
  • Then from the drop down menu (beside Manage) select WebsitePageItem. Click List, to the right.
  • Click Add
  • In the Summary, call the video a relevant name, for example video_propety-prices
  • For the Content section, you need to click on Edit Source in order to add the actual coding for the video. And this is where you need to get very specific in order to format the video correctly on your website.
  • Open a new browers (Firefox or Chrome). FIRSTLY follow the instructions on how to find the video code and then after this you can add it.

    Adding the video code:
  • Go to YouTube.com and find the video you wish to use on your site.
  • To find a YouTube link, select Share which is located below the video.
  • Now click on Embed. This will bring up the code that you need to add into Webdadi in order for the video to be shown. Highlight the full code and copy it.
  • Now go to Notepad on your computer and paste this Embed code you have copied from YouTube. The embed code will look like this:
    <iframe width="560" height="315" src="https://www.youtube.com/embed/pq9YTQ1D9eU" frameborder="0" allowfullscreen></iframe>

    The only part you will need is this part in bold:
    <iframe width="560" height="315" src="https://www.youtube.com/embed/pq9YTQ1D9eU" frameborder="0" allowfullscreen></iframe>

    Copy that bolded selection above from your URL and paste it on top of this code below, over the bolded font here:
    <P><IFRAME height=283 src="https://www.youtube.com/embed/SXk-7tA21Kw" frameBorder=0 width="100%" allowfullscreen></IFRAME></P>

    Now highlight all of this code that now has the correct URL for your own video. Copy it.

    COPY THIS NEW TEXT WITH YOUR OWN EMBEDED YOUTUBE LINK:
    <P><IFRAME height=283 src="https://www.youtube.com/embed/SXk-7tA21Kw" frameBorder=0 width="100%" allowfullscreen></IFRAME></P>
  • Go back to Webdadi, and to the WebsitePageItem you have been creating in IE. 
  • Where you opened Edit Source (under Content), paste the YouTube coding in here. Unfortunately Edit Source is usually partially hidden so you need to get your cursor to hover under Content, in order to click on Edit Source.
  • Paste the YouTube coding in that you have just copied from above (the example above)

    Now you need to go to where the YouTube link has hyperlinked itself in purple and click the back delete button right after the hyperlink. This will get rid of the hyperlink. THIS IS VERY IMPORTANT OR THE VIDEO WON'T PLAY. 
  • Select Save in the bottom right corner, above Ok.
  • Don’t select Ok yet.
  • After you select Save, it will take you back to the Details tab.
  • Tick the Visible box at the bottom so the WebsitePageItem will display.
  • If you would like video to have a title, you can add the Title in the Title field.
  • Click Ok to save. You have now created a WebsitePageItem that will display a video that can be played on your site like this.
  • To add it to your homepage, click back up to the top dropdown menu and select Website Page, and select List.
  • Find home and double click on it to open it.
  • Click on Items. Click Add from the top right corner.
  • You will be prompted to find a WebsitePageItem. This is where you find the one you just created.
  • Find the WebsitePageItem you just created and highlight it. Select Ok to add it. It will now display at the bottom of your home page.

If you would like to create a page that houses only small video boxes, like this example, simply follow the instructions below and add them to a video page.

  • Firstly create the Website Page, perhaps called Videopage
  • Then follow the instructions above to add individual WebsitePageItems containing videos to that page, one at a time.
  • Link each of these WebsitePageItems to your new Website Page, videopage.
  • Once you have added multiple WebsitePageItems with videos on them, the page will look similar to this - Video page

For more information and a visual guide on how to do this, refer to the PDF guide below, Adding video pages to Zephyr or Quantum.
 

Please Download these instructions