Videos
See what standalone video components are available, how to populate them and from where your video file can be streamed
Standalone video components
The following video components are available for use:
- Video Midpage Centred
- Video Midpage Full
- Video List V4
- Video Fullpage
NOTE: There are also Banner components that cater for displaying videos, both a Hero Banner and Midpage banner. Refer to the following Video Banner page for more details.
Videos that can be included:
- A video file uploaded and hosted through the WEM (the video file is streamed from our Vidavee Service Provider's servers in the USA)
- YouTube video URL - ensure you add the YouTube link that includes the "watch?v=<video id> " into the External File URL field for the video eg https://www.youtube.com/watch?v=q7CLq8ZKQM0
How to display a Video
- Populate a video media item and save it in the relevant folder (watch the video below to see how to do this)
- You must create a video media item for BOTH a YouTube hosted video and a WEM hosted video file
- A caption is required for VideoListV3
- An image will be displayed, if captured
- Drag and drop the relevant component template onto your page
- Replace the video media item with your own one
- CHECK: associate the video media item to a channel
Image requirement for a video
- The image that is rendered must be populated in the Video media item
- It is not mandatory to upload an image for these standalone video components
Video List V4 component heading
How to Transfer Money from Your Stanbic Foreign Currency Account to Cedi Account
Transfer funds from your Stanbic Foreign Currency account directly into your Cedi account using the Stanbic Internet Banking platform.
Learn how easy it is to assemble your webpages
Just drag & drop a component template onto the page and replace the content
Assemble webpages quickly and easily using component templates
Testing the carousel functionality
How to assemble a video
Learn how to create a video media item on the WEM for both YouTube and Vidavee hosted videos
Video List V3 component heading - old component, now replaced with Video List V4
How to Transfer Money from Your Stanbic Foreign Currency Account to Cedi Account
How to assemble a video
HOW TO USE THE VIDEO FULL PAGE COMPONENT (see below)
Note that no image is required for this component. The video plays in the background. You add the text and links that are overlayed on the video. See how to do this below.
Populate a Video Media item:
- This component does NOT cater for a YouTube video. You have to upload the mp4 video file into the WEM
- You can upload your video file using either of these approaches:
- Select UPLOAD -> Video and then select 'Internal Storage repository' and drag & drop your video file into the editor OR
- Select 'NEW content' -> New CTD -> VgnMediaManagement -> 'Video' and then UPLOAD your file into the 'Source File' atrribute
- ASSOCIATE the video media item to your channel. APPROVE and PUBLISH the video. Note the video MUST BE PUBLISHED in order to see it play in Preview.
Add the component to your page:
- Drag and drop the Video FULL PAGE component template, into a full width region
- CLONE the SBG CONTENT LIST
- Under Related Content -> CLONE the SBG Teaser - it has the TEXT that is overlayed on the video. The main button link comes from the Link in the Teaser. Replace the content in your cloned teaser with your own.
- Under Related Content -> REMOVE and REPLACE the VIDEO with your own video
- Under Related Links -> UPDATE the link url for the 'Download the App' functionlaity. If the Download the App Links are not required, remove the 2 links under Related Links.
- NOTE: If any of the fields are not populated, the spacing is adjusted accordingly.
- In order to get the enboldened styling, add the following css markup around the words <b> your content that needs to be enboldened </b>
- TEXT ALIGNMENT on the video
- The placement of the text on the video can be either: left, centre or right aligned
- The default alignment will be LEFT.
- You can change the alignment under the Presentation Properties -> Text1Aligement
- In order to get the enboldened styling, add the following css markup around the words <b> your content that needs to be enboldened </b>
Video specifications
- This component does NOT cater for a YouTube video. You have to upload a video file into the WEM
- There are no video controls – the video will play constantly and repeat playing once it ends
- Video should have a 16:9 aspect ratio
- At 1080p, the playback quality will be 1920x1080, whilst at 720p, it will be 1280 x 720 resolution. The lower resolution will reduce the size of the video
- Aim for 720p if it does not reduce the quality of the video
- Keep the video as short as possible to reduce the overall size
- Aim to keep the overall video size < 50 MB, to make bandwidth usage as low as possible