The PhotoBiz Website Builder includes a Video Block that allows you to showcase video content on your website. You can:
- Upload video files directly to your PhotoBiz account for playback in the Video Block.
- Use an embedded video from a hosting platform like YouTube or Vimeo by pasting the embed code.
Learn More:
How To Upload Video To PhotoBiz
How To Upload A Video To YouTube
How To Upload A Video To Vimeo
PRO TIP!
With the Website Package, video files can be up to 4MB each. If you need to upload larger video files (up to 50MB each), you can purchase the Original Files option in the Premium Upgrades section of your PhotoBiz account.
Learn More: How to Add Original Files to PhotoBiz
STEP ONE
- Log into your PhotoBiz account.
- Click on WEBSITE in the left-side menu.
STEP TWO
- Click on the PAGE NAME where you want to add a video.
- Click on the VIDEO BLOCK icon in the right-side menu.
STEP THREE
Click inside the Video Block or on the Pencil icon (top right) to edit.
STEP FOUR
Choose Your Video Source
The right-side menu will open, allowing you to choose a Video Type:
- Embed Code – Paste the embed code from YouTube, Vimeo, or another platform.
- My Videos – Select from the videos you uploaded to your PhotoBiz Video Library or Upload New Videos to your PhotoBiz account.
Embed Video Options
- 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 4 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.
- No Crop Banner: Your video will display without any cropping in your banner.
For added engagement, videos uploaded to your PhotoBiz account displayed in the "full screen," "banner," and "no crop banner" layouts will auto-loop, perfect for creating dynamic headers and backgrounds. However, if you prefer a non-looping option, the "standard" layout provides that flexibility.
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.
Full Screen Layout:
- 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.
- Title Alignment: Choose between Left, Right, and Center alignment for your video title.
- Description Alignment: Choose between Left, Right, and Center alignment for your video description.
- Button Alignment: Choose between Left, Right, and Center alignment for your video button.
- Space Below Blocks: Controls the amount of space before the next block begins.
Banner Layout
- 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.
- Title Alignment: Choose between Left, Right, and Center alignment for your video title.
- Description Alignment: Choose between Left, Right, and Center alignment for your video description.
- Button Alignment: Choose between Left, Right, and Center alignment for your video button.
- Space Below Blocks: Controls the amount of space before the next block begins.
Standard Player Layout
- Title Alignment: Choose between Left, Right, and Center alignment for your video title.
- Description Alignment: Choose between Left, Right, and Center alignment for your video description.
- Button Alignment: Choose between Left, Right, and Center alignment for your video button.
- Space Below Blocks: Controls the amount of space before the next block begins.
- Space Inside Blocks: Controls the amount of space above and below the video inside the block.
No Crop Banner Layout
- 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.
- Title Alignment: Choose between Left, Right, and Center alignment for your video title.
- Description Alignment: Choose between Left, Right, and Center alignment for your video description.
- Button Alignment: Choose between Left, Right, and Center alignment for your video button.
- Space Below Blocks: Controls the amount of space before the next block begins.
COLORS
The video color section will include various color options depending on which layout you've selected (Full Screen, Banner, Standard, or No Crop Banner). 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
Adding A Background Image
- Upload a Custom Background Image or choose from the Background Library.
- Customize how the background displays:
- Tile – Repeats the image.
- Top Left – Aligns it to the top-left.
- Centered – Aligns in the center.
- Cover – Scales to cover the background.
FONTS
You can override your global font settings by customizing:
- Title
- Subtitle
- Button Text
- Adjust font size, spacing, and line height.
ANIMATIONS
Choose an animation effect for your button hover:
- None
- Fill
- Overlay
- Scale
- Arrow
Click Save Changes to apply your updates.