Adding video to your site is simple. There are 2 options:
- Use a video service as YouTube or Vimeo.
- Upload video yourself.
Using a video service has many benefits. You become part of the services index and this could help increase the visibility of your site or brand and you can take advantage of their hosting infrastructure. The main issues people have are of copyright - typically you had over rights to the production - and limited 'call to action possibilities' using another organsation's website.
If you want to host locally, we will give you an uploader and help you with the video optimisation and conversion. Ask us.
If you want to host your video on a hosting site follow these steps. YouTube and Vimeo are similar. Vimeo is more 'profession' and YouTube more 'social' so the audience you are looking for will determine the service that you are looking for.
Adding a YouTube Video to Your Site
To add a YouTube video to your site, first produce it and upload it. Most video production tools allow you to post directly to YouTube or you can use the uploader on their site.
Step 1: Locate your video on YouTube
It will be in your 'channel' or search for it.
Step 2: Access the 'embed' details of the video and copy these details
This is via the 'share' link under the video, then choose 'embed'.
It is the text in the screen shot that you need to copy.
Step 3: Locate the page on your website
Make sure that you are signed in so that you can see the editing functions. Use the 'Edit' button to access the page editing facilities.
Reading raw HTML and finding where to put you video in the code is hard. So put some text e.g. "VIDEO HERE" in the content where you want the video to be so that you can find the place later.
Step 4: Edit 'source'
To avoid the text editor from converting the video code into printable text, view the content as "Source".
If the view doesn't change to show code (<p> etc as per the next image) you are not in HTML source mode.
Step 5: Paste in the embed details
Check that the details are in the code as follows:
In 2016 you will probably want the code to look like this. See the 'advanced notes' below.
<div class="flyingblind-video-wrapper">
<!-- Copy & Pasted from YouTube -->
<iframe src="https://www.youtube.com/embed/eOLhMPOyqGI?showsearch=0&showinfo=0&playlist=&modestbranding=1&egm=0&rel=0" frameborder="0" allowfullscreen></iframe>
</div>
Step 6: Review the video.
Advanced YouTube - Responsive Video
Most of the sites that MountainRiver CMS produce these days are responsive, that means that they adapt to the size of the screen of the device used to view the website.
There are two steps to getting maximum impact video
- Remove the 'width' and 'height' attributes.
- Add the html 'container' that we tell you to add. If you don't know what it is, please ask.
The embed code will look something like the following. The container is a 'div' called 'flyingblind-video-wrapper'.
The YouTube code is from YouTube with a few modifications.
Adjusting the display of YouTube Videos
Most videos that we display we want to:
- Hilight the video. That means removing as much distraction from around the video as possible. We want it to appear seamless in our website.
- Display the contents of the video, not the whole of YouTube.
There are some custom parameters that allow us to do this.
Back to the Flying Blind video YouTube code.
<iframe src="https://www.youtube.com/embed/eOLhMPOyqGI?showsearch=0&showinfo=0&playli... frameborder="0" allowfullscreen></iframe>.
Demystifying:
- Clean up the display add the following codes: showsearch=0&showinfo=0&playlist=&modestbranding=1&egm=0
- Don't display suggested videos at the end of the video. Go back to the screen that you chose when you uploaded the video: "&rel=0"
This is very technical. Please contact us if it is not clear.