How To Add Video Blocks
This video tutorial will guide you through adding video blocks to your PhotoBiz website builder.
PhotoBiz Website Builder includes the Video Block that allows you to showcase video content on your website. You'll need to upload your video content to a video hosting platform such as YouTube, Vimeo, Wistia, or another video hosting platform. These platforms provide the embed codes that allow you to embed your video content into your website.
STEP ONE
Log into your PhotoBiz account and click on WEBSITE in the left-side menu.
STEP TWO
Click on the PAGE NAME you want to add a video block to and then click on the VIDEO BLOCK icon in the right side menu.
STEP THREE
Click anywhere inside the Video Block or on the Pencil icon on the top right of the video block to customize the block and add your video.
STEP FOUR
The right side menu will open and you'll be able to add your embed code from the video hosting platform you're using. In the example, we're using YouTube embed code. You'll see the following fields that you can update.
- Embed Code: Paste the embed code provided by YouTube or Vimeo in the Embed Code box.
- Title/Description: Add a Title and Description for your Video Item.
- Mobile Cover Image: Upload a mobile cover image to display on mobile devices before a user clicks to play your video. If no cover image is uploaded, only a "play" button will display. If you prefer a still from your video to display before clicking the "play" button, do not upload a cover image.
Note: You must add a mobile cover image if using the banner or full screen video layouts.
- Button Text: Add a button to display with your video and add a link to encourage users to take action.
Link options include:
- NONE: Your item would not link anywhere.
- EXTERNAL LINK: Direct your clients to helpful resources that exist in a place other than your website.
- PAGE: Direct your visitors to an existing web page on your website.
- FORM: Connect to a Custom Form you have created in your FORM BUILDER.
- MARKETING: Direct users to a Campaign or Landing Page you have created in the MARKETING tool.
- FILE: Allow users to open a PDF, JPG, PNG, or GIF file that has been uploaded to the DOCUMENTS area of your account's FILES section.
- PHONE: Connecting your item to a phone number allows users to quickly click to call you.
- EMAIL: Connecting your item to an email address opens a user's default mail client to easily send you an email.
- ADDRESS: Allow users to find where you are by opening an address in Google Maps.
- VIDEO: Add a video embed code obtained from YouTube or Vimeo to play in a light-box.
Click on the SAVE CHANGES button at the bottom to update your video block and add your video to your website.
STEP FIVE
Choose the layout you want to have for your Video block. The following 3 layouts are available for the Video block:
- Standard: Your video will not be cropped and the play button appears over the video.
- Banner: Your video will be cropped to fit in the fixed height of the banner.
- Full Screen: Your video will be minimally cropped to fill the screen edge-to-edge and top-to-bottom.
Important Note: The Banner and Full Screen layouts require that your video have autoplay settings turned on. Follow the steps below to turn on autoplay for your Vimeo or YouTube video.
AUTOPLAY YOUR VIDEO
Enabling videos to play automatically when visitors land on your page can pose challenges. Most browsers and devices disable autoplay for video content as a default setting. While there are ways to work around this limitation and achieve autoplay, it's important to note that if your video has audio, it will be muted. Here are the steps you can follow if you're aiming to incorporate autoplay video content on your webpage.
Vimeo Autoplay
If your video is hosted by Vimeo, click share on the video. Next to the Embed section, click show options.
Under Special Stuff, click Autoplay this video. Check the box for autoplay.
Copy the autoplay embed code and paste it into your Video block.
YouTube Autoplay
If your video is hosted by YouTube, you will need to manually add the autoplay code to your YouTube embed code.
Click share on the video and click embed. Copy the code and paste it into your Video block.
Your code will look like this:
To make your video autoplay, type ?mute=1&autoplay=1; right after the video's URL, before the ending quotation mark.
Your code will now look like this:
STYLING
The Styling area will give you different available options to change the way your video block looks depending on which layout you've selected.
If you've selected the FULL SCREEN layout, you'll have the following options:
- Overlay Opacity: The overlay opacity adjusts the transparency of the background behind your video's title, description, and button. You can increase the amount of transparency behind the video's information by lowering the overlay opacity's percentage.
- Display Scroll Down Arrow: Choose whether or not the scroll down arrow displays on your banner.
- Space Below Blocks: Controls the amount of space before the next block begins.
If you've selected the BANNER layout, you'll have the following options for styling:
- Overlay Opacity: The overlay opacity adjusts the transparency of the background behind your video's title, description, and button. You can increase the amount of transparency behind the video's information by lowering the overlay opacity's percentage.
- Space Below Blocks: Controls the amount of space before the next block begins.
If you've selected the STANDARD layout, you'll have the following options.
- Space Below Blocks: Controls the amount of space before the next block begins.
- Space Inside Blocks: Controls the amount of space at the top and bottom of a block.
COLORS
The video color section will include various color options depending on which layout you've selected (Full Screen, Banner, or Standard). These colors will override the colors for the videos and background that have been picked in the global color picker section under the DESIGN tab in your control panel.
BACKGROUND
You can add a background image to display behind your Video block by adding a background image. You can upload your own custom background image or choose one from the Background Library. You can customize how the background image is displayed under the Background Settings.
If you upload a Custom Background or select a file from the Background Library, you can customize how the background image is displayed under the Background Settings from the following 4 different options:
- Tile: Will tile your image to fill the background
- Top Left: Will align your image to the top left
- Centered: Will align your image at the center of the available space
- Cover: Will scale your image to be as large as possible to completely cover the background
Click on Save Changes to apply your changes to the background settings.
FONTS
Click on the Fonts option in the right-side menu that opens up.
You can easily customize the fonts you're using on your video blocks to override your global font settings. You can change the font, font size, letter spacing (kerning), and line height for any of the following items in your video block:
- TITLE
- SUBTITLE
- BUTTON TEXT
Click on Save Changes at the bottom of the control panel menu to apply your changes.
0 Comments