Introduction

The Blocks in the Media category allow you to more effectively display high-quality video and images at full screen width and with different background colors, etc.

 

Summary

 

Adding Media Blocks

To add Media Blocks, navigate to the CMS > Page Editor > + Blocks:

Scroll down and find "Media".

 

There are multiple types of Media blocks, including Image, Video, and Live. 

 

Video Block Types

There are four different styles available for the video block:

Single Video

The first type of video block is "Single Video." You can input your YouTube URL or upload your video, edit the video title, background color, and style as you would like. This is what these fields look like prior to editing:

The video settings default to showing a progress bar, so do not forget to choose the other options if you would prefer to adjust this. 

 

Double Videos

The second video block style is called "Double Videos." This style has two columns for displaying the videos (this cannot be customized at present). As you can see in the picture, it is divided into the left and the right, and you can edit them separately.

Here is what the settings for this style look like:

The video play method is forced to play because there are multiple videos. It will also show the progress bar by default and unmute the volume when played. 

 

Video List

The third style of this block is presented as a video list. This is typically used for showing more than two videos and you can choose the columns (2-5) and spacing (0-50) as you would like. You can set the title and descriptions as well as the background of the block.

Just like with the "Double Videos" style, the video play method is forced to play because there are multiple videos. It will also show the progress bar by default and unmute the volume when played. You can also customize what order of the videos displayed on the site.

 

Virtual Tour

The last style of the video block is for displaying virtual tours and videos in a large format:

You can upload multiple videos and multiple virtual tour links using this option. You can also edit the titles of the video and virtual tour sections displayed on the site. The background color can also be adjusted.

 

Zoom Live Block

Here are the different items that can be edited for this block:

• Live Name: The title of the block.
• Live Description: The description of the block.
• API Key: Paste in the "API Key" that was obtained at the beginning of this process
• API Secret: Paste in the "API Secret" that was obtained at the beginning of this process
• Meeting ID: Paste in the Zoom "Meeting ID" (for more information on this see What is a Meeting ID?)
• Meeting Password: Paste in the meeting password (for more information see Meeting and webinar passwords)

*IMPORTANT: Please note that currently all Zoom Meetings that are integrated into the Lofty website will be set to be public so that all leads can participate directly.

 

Schedule a Zoom Live Meeting

Before you start, make sure you have a Zoom Live meeting scheduled and that you have the meeting link available. Click HERE to learn how to schedule a Zoom Live/Meeting.

 

API Key and API Secret

In order to integrate Zoom into a Lofty website, you will first need to obtain the Zoom API Key and API Secret at https://marketplace.zoom.us/. For detailed instructions, please reference the following YouTube video that explains it well: How to Generate Zoom API Key

 

Youtube Live Block

This feature is designed to allow Lofty users to add a YouTube Live stream block to their Lofty website.

The following are the options that can be edited on the YouTube Live block:

1. Live Name. This is the title of the block.
2. Live Description. The description of the block.
3. Live Embed Type. Choose the integrated type for the YouTube Live Block.
   • Live Embed Code: We do not recommend choosing this option.
   • Live URL: Paste the YouTube Live URL that you copied in the "Schedule a YouTube Live Stream" step.

 

Schedule a YouTube Live Stream 

Before you start, make sure that you have a YouTube livestream scheduled and that you have the URL to the live stream ready to go.

• Click HERE to learn how to schedule a YouTube Live stream
• Another useful video on this topic can be found HERE

Be sure to click the "share" button and then "COPY" so you can grab the stream URL and add it into Lofty later in the CMS Tool.

 

 

 

Facebook Live Block

This feature is designed to allow Lofty users to add a Facebook Live stream block to their Lofty website.

Before you start, make sure you have a Facebook Live stream scheduled and that you have the Facebook Live embed code. Here are the steps:

1. Access Facebook Live Producer at facebook.com/live/producer.
2. Click "Schedule a Live Video" on the left sidebar.
3. A new window will appear on the left side of the screen. Scroll down and fill in the time and date the video will go live, where the post should appear, and the title and description of the live video.
4. If all of the previously mentioned fields have been filled out correctly, the grey "Schedule Live Video" button at the bottom of the page will turn blue. Click this button to schedule your broadcast.
5. Finally, click Settings > Stream > Embed Code, and then copy the embed code to use further along in the process.

 

 

If needed, the video found HERE might provide some useful context on how to set this up.

 

*Please Note* The video will remain on the block if it is not deleted and still set to "public".

 

The following are the options that can be edited on the Facebook Live block:

1. Live Name. This is the title of the block.
2. Live Description. The description of the block.
3. Live Embed Type. Choose the integrated type for the Facebook Live Block.
   • Live Embed Code: This is the recommended option because it's easy to find. Paste the code that was copied at the end of the "Schedule a Facebook Live Stream" step at the beginning of the article.
   • Live URL: Paste the Facebook Live post URL that you copied in the "Schedule a YouTube Live Stream" step.

Troubleshooting Tips

If you are having issues with Facebook Live, try these steps before contacting Lofty support. 

• Ensure that Facebook Live streaming is set to "public".
• Make sure you are not using the camera with another application on your device.
• Use the "embed code" option, please refer to Schedule a Facebook Live stream.
• Try to copy the "embed code" after successfully scheduling or creating a live stream:

 

Questions?

If you have any questions regarding this topic or any others, please reach out to our Support Team via email at <support@lofty.com>, by phone at 1 (855) 981-7557, or by a chat with us through your Lofty CRM.

 

Related terms: Gallery, CMS tool, blocks