How to show a video in the top header section of your property or agent website
The steps below are for property websites. Setting one up on an agent website works a little differently. See Agent websites at the end of this article.
Select the desired property in your CRIBFLYER admin panel and navigate to the Video screen.
Click the + Add Video button to add a video if you haven't done so already.
Then check the box labeled Autoplay this video in the top section of website. See the screenshot below for reference.
Navigate to the Website Editor by clicking on the Edit Website Design button.
When the website editor loads, click the Sections + Layout button to open the Website Sections menu (if it doesn't open automatically).
Click the Top Header section button on the website sections menu. This will load a menu showing a list of available layout templates for the top header section.
Scroll down the list of available Header Layout templates and find one labeled Video Header. This is layout template #14 in the example screenshot shown below. The template number you see may differ but the template description will indicate that it is a Video Header.
Click the Apply Template link for the video header. The website preview pane will now reload with the video header applied.
After you've applied the Video Header template as the selected header layout it will appear at the top of the menu.
Click the Customize button. See the screenshot below for reference.
After clicking the customize button you'll see a few settings pertaining to the video. You can customize the player control colors as well as the video's aspect ratio.
Most video is shot in 16:9 aspect ratio (HD format). However, If your video appears stretched, squished or letterboxed then change the aspect ratio setting to match the aspect ratio of the video itself. When in doubt ask the person who created the video to tell you what aspect ratio it has. Some video shot for social media is square (1:1) or tall and narrow (9:16) portrait mode HD.
When the website initally loads it will show the 1st property photo from your photo gallery for a brief moment while the video is loading. This is so there's something to show as a placeholder if the video takes a bit of time to start playing due to a slow internet connection.
When the video starts playing you'll see the play/pause and sound controls at the bottom center of the video.
Please note: The latest versions of Chrome, Safari, Edge and Firefox may block autoplay on mobile phones and some desktop computers if the user has not previously interacted with the website.
Sound is also muted by default when the video autoplays. The user will need to click the unmute button to turn the sound on. This is done for usability reasons and because some browsers will block autoplay videos if they have sound turned on by default.
Agent websites
Agent websites have their own Video Header layout. It works like the property version: the video autoplays with the sound muted, with play/pause and sound controls at the bottom center of the video. To set it up:
- Select the agent in your CRIBFLYER admin panel and navigate to the agent's Video screen. Click the + Add Video button to add a YouTube, Vimeo or Wistia video if you haven't done so already.
- The header plays the first video in the list. If the agent has more than one video, drag the one you want to the top of the list. Agent videos have no autoplay checkbox. Applying the Video Header layout is what turns it on.
- Click the Edit Website Design button, then Sections + Layout, then the Top Header section.
- Find the layout named Video Header and click Apply Template.
- Click the Customize button to adjust its settings.
The Customize settings for the agent Video Header are:
- Manage Videos: a shortcut back to the agent's Video screen.
- Placeholder Photo: shown while the video loads, and on its own if no video has been added yet. The Overlay Opacity setting darkens it so the navigation links stay easy to read.
- Video Aspect Ratio: set this to match your video, as described above.
- Player control colors, the Section Title and Subtitle shown below the video (the agent's name and title by default), their color, and the Section Background Color.
On desktop computers the navigation links fade out while the video plays and come back as soon as the visitor scrolls down or pauses the video. On mobile phones the video does not autoplay. It shows as a regular video that visitors tap to play.