How To Amend Your Homepage Video Loading Placeholder Image.
Within your Atom template If you have a video homepage, you have the facility ability to add a video to the homepage of your website.
This video is added, by firstly, uploading it to either YouTube or Vimeo and is then streamed from the platform itself when a user loads the site. As part of the ATOM platform we will also add a placeholder image to your website which outputs while the video is loading.
There are two ways in which your VIA software will be set up to manage this image if you would like to change it at any point.
1 - In VIA you will go to Pages>Video Pages then click on the videos button. You will see a video code in the field 'Home YouTube Code' that is powering the homepage video. You can change the video at any point by adding a new YouTube or Vimeo URL to this field.
You will also see that there is an image attached to the media uploader in this section of VIA, this is powering the mobile/tablet image that you see when going onto the homepage.
If you add an image to the media uploader and call it homepage-transition, this image will be the new image to be used while the homepage video loads. If an image isn’t added in VIA then the fall back option will be the YouTube or Vimeo thumbnail assigned to that video.2 – In your VIA software you may alternatively have a video added through the home page, in this instance you will have an item container with three slides above the fold for example.
If you have this homepage setup, there is a video added to the item container with a field called Video Embed Code but now you will be able to use the media uploader in that item in order to add a transition image, which will be used while the homepage video loads. If an image isn’t added to this item in VIA, then again the fall back image is the YouTube or Vimeo thumbnail for that video.placeholder image that will display when the visitor first lands on the page. This will appear whilst the video is buffering in the background, and when the video has loaded, the image will crossfade into the video to give the user a better user experience.
By default, the thumbnail image of the video itself will display whilst the video loads. If you haven’t chosen a thumbnail image for your video, a grey page/icon may display instead
We don’t recommend you rely on displaying the thumbnail from the video. Whilst this will occur automatically, the thumbnail is usually of poor quality, and appears blurry online.
How to add/edit the image which appears whilst your video loads
If you have a static video homepage:
Go to Website > Video Pages
Click Search
Double click the search result which you see in the list, or right click it and select edit
Scroll to the media section:
You may see an image already uploaded here. This will be the image which is used when a visitor views the website on a mobile or tablet device. if you would like to use this image for the video transition, simply name the image homepage-transition in the image name section
Alternatvely, you can use a different image to that which you are using for mobiles and tablets, and upload a new image purely for the purposes of the video transition. In this instance, upload your new image, and name the new image homepage-transition in the image name section
If you have a carousel homepage with video slides
Go to Website > Pages
Use the Search function to find the page called home
Double click the home page from the list, or right click it and select edit
Scroll to the items section. The first item in this section will be where you control the slides which appear on your homepage.
You may see an image already uploaded here. This will be the image which is used when a visitor views the website on a mobile or tablet device. if you would like to use this image for the video transition, simply name the image homepage-transition in the image name section
Alternatively, you can use a different image to that which you are using for mobiles and tablets, and upload a new image purely for the purposes of the video transition. In this instance, upload your new image, and name the new image homepage-transition in the image name section