ADDING VIDEO PAGES. DOCUMENT Here is a guide to adding videos to your responsive website in Webdadi. WEBDADI Updated Jan 2016

Transcription

1 DOCUMENT Here is a guide to adding videos to your responsive website in Webdadi WEBDADI Updated Jan 2016 ADDING VIDEO PAGES How to add a page of videos to your website, or individual videos featured on a page - ZEPHYR AND QUANTUM TEMPLATES

2 Contents ADDING VIDEO CONTENT TO THE HOME PAGE:... 1 Firstly you need to add the video to a new WebsitePageItem (1):... 1 Adding the video code:... 1 Want to add it to your home page (2)?... 3 ADDING A VIDEO TO DISPLAY INSTEAD OF AN IMAGE ON A WEBSITE PAGE... 4 Create the Webpage... 4 Now find the YouTube vide you would like to add... 5 Create the Webpage (1)... 6 Add the WebsitePageItems that contain each video (2)... 6 LINKING YOUR NEW WEBSITE PAGE TO YOUR WEBSITE MENU... 7 ADDING VIDEO CONTENT TO THE HOME PAGE: You may want to add a WebsitePageItem to your home page to show off a video relating to your Estate Agency. To do this firstly you ll need to create the WebsitePageItem, and then add it as an Item to your home page as you would any other item. Firstly you need to add the video to a new WebsitePageItem (1): o Log into Webdadi and click Configuration from the left-hand menu o Click the drop down menu (beside Manage pictured below) and select WebsitePageItem. Click List, to the right. o Click Add o In the Summary, call the video a relevant name, for example video_propety-prices o 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. o Open a new browers (Firefox or Chrome). FIRSTLY here is how to find the video code and add it. Adding the video code: o Go to YouTube.com and find the video you wish to use on your site.

3 o To find a YouTube link, select Share which is located below the video. o 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. o No go to Notepad on your computer and paste this Embed code you have copied from YouTube. It will look like this: <iframe width="560" height="315" src=" frameborder="0" allowfullscreen></iframe> o The only part you will need is this part in red: <iframe width="560" height="315" src=" frameborder="0" allowfullscreen></iframe> o Copy the red selection above from your URL and paste it on top of this code below, over the red font here: <P><IFRAME height=283 src=" frameborder=0 width="100%" allowfullscreen></iframe></p> o Now highlight all of this code that now has the correct URL for your own video. Copy it. * Please note it doesn t matter what colour the font is.

4 o Go back to Webdadi, and to the WebsitePageItem you have been creating in IE. o Where you opened Edit Source (under Content), paste the 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. o Paste the coding in that you have just copied from above (the example above is in grey) o 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 o Select Save in the bottom right corner, ABOVE Ok. o Don t select Ok yet. In summary: Paste code Fix the hyperlink Select Save o After you select Save, it will take you back to the Details section. o Tick the Visible box at the bottom so the WebsitePageItem will display. o If you would like video to have a title, you can add the Title in the Title field. o Click Ok to save. You have now created a WebsitePageItem that will display a video that can be played on your site like this. Want to add it to your home page (2)? o If you want to add this to your home page, click on Website Page, and select List.

5 o Find home and double click on it to open it. o Click on Items. Click Add from the top right corner. o 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. ADDING A VIDEO TO DISPLAY INSTEAD OF AN IMAGE ON A WEBSITE PAGE You may want to add a new page to your website to display a headlining video, rather than a large single image. This will appear on the page like this example below. Create the Webpage o Click on Configuration from the lefthand menu in blue o Click the drop down menu (beside Manage pictured below) and select Website Page and press List. o Select Add o Change the summary to a name that is all lower case with no spaces, e.g. our-company o Go to Title and add a title for your page, for example Our Company

6 o In the Content section, add content if you wish to explain the video displayed on your page. o At the bottom ensure you tick Visible so the page will display. o Select Ok to save for now. Now find the YouTube vide you would like to add o Go to YouTube.com and find the video you wish to add. o Click on Share o Now select Embed o Copy the full embed code (which begins with <iframe) o o Go back to Webdadi. Open the Website Page you created. o Scroll down to Embed Video Code. Paste the embed code from YouTube.com here. o Click Ok to save. Or find the Vimeo video you would like to add o Go to Vimeo.com and find the video you wish to add. o Click on the paper airplane o Now select Embed o Copy the full embed code (which begins with <iframe) o o Go back to Webdadi. Open the Website Page you created. o Scroll down to Embed Video Code. Paste the embed code from Vimeo here. o Click Ok to save.

7 ADDING SMALL VIDEOS WITHIN A WEBSITE PAGE TO DISPLAY VIDEO CONTENT You may want to add a new page to your website to display multiple videos on one page, like this example. This will appear on the page like this example below. You can do this by firstly creating a page (1), and then adding the WebsitePageItems that contain each video (2). Create the Webpage (1) o Click on Configuration from the left-hand menu in blue o Click the drop down menu (beside Manage pictured below) and select Website Page and press List. o Firstly you need to create the page that you want to display. Eg. A page called Videos o Select Add o Amend the summary to a name that is all lower case with no spaces, e.g. videos o Go to Title and add a title for your page, for example Useful Videos o In the Content section, add your content if you wish to explain the videos displayed on your page. o At the bottom ensure you tick Visible so the page will display. Add the WebsitePageItems that contain each video (2) o Now you need to add the WebsitePageItem you just created with the video on it o Click on the Items tab o Click on Add from the top right o You will now be prompted to find the video you created

8 o Highlight that WebsitePageItem and then select Ok. o This will add the video to the page. o Click Add if you would like to add more items. o Once you have added them all, select Ok to save the changes to your new page. LINKING YOUR NEW WEBSITE PAGE TO YOUR WEBSITE MENU Now you need to create a Web Link for this page so it can be directed to a dropdown menu that already exists on your site. o From Configuration, select Web Link from the dropdown menu to the right of Manage. Select List. This will show all of the existing links to each page of your site o Select Add. o Create a Web Link page for your newly created page above. Change Summary to be a title with no spaces (use - for any spaces instead) o Under Title, simply add the title for your page, Useful Videos o Then under URL: type the name of the Website Page you have created and add a forward slash before the name, all in lower case. E.g. /videos o Tick visible o Select OK to save Now you want to assign this web link to the page you created and place it under the relevant menu on your website: o Go to Web Link and select List. Select the menu item you wish to add your new page to. Double click on this menu item it might be called mainmenu o Click on Sub Menu o Select Add o You will be directed to find the Web Link you just created (e.g. videos). This is going to link your webpage to the menu that you want it to appear under. Highlight it, then select OK.