Custom Live Streaming

For Vimeo Livestreamopen in new window feeds, it is a bit more involved as the "feed" is not coming from Vimeoopen in new window directly and the Video   element cannot use the Livestream feed as-is.

Although in many cases the <iframe/> code supplied will vary from platform to platform, there are a few pieces that are fairly common and need to be addressed when you embed an iFrame with the HTML-Row   element.

You will need to remove the width and height parameters (if they are specified) and you will need to add a custom CSS class to the <iframe/> code. The following is an example of an <iframe/> code you might start with (borrowed from w3schools.org - HTML iFramesopen in new window):

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

Removing the two properties and adding the required CSS class would change the example <iframe/> to the following:

<iframe class="resp-iframe" src="demo_iframe.htm" title="Iframe Example"></iframe>

The <iframe/> then needs to be wrapped in an HTML <div/> element which includes another required custom CSS class.

<div class="resp-container">
    <iframe class="resp-iframe" src="demo_iframe.htm" title="Iframe Example"></iframe>
</div>

Now you can add the required custom CSS (see below) using the Add Style Introduction To Advanced Styling   feature to the HTML-Row   element. This will make the embedded video responsive to all screen sizes.

.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

Note the two "specific" classes that were added to the HTML used for the feed.

Make sure to click on the Update button to save the custom CSS and close the Edit CSS window.

TIP

You can also use this approach with the HTML   Column Content element.

You can use the HTML-Row   element and a Vimeo Livestream generated <iframe/> code. Instructions on where to get this can be found at How Do I Embed My Event?open in new window on the Vimeo Livestream help site.

As an example, you will start with the generated default <iframe/> code from Vimeo Livestream.

<iframe id="ls_embed_1612978940" src="https://livestream.com/accounts/11707815/events/4299357/player?width=640&height=360&enableInfoAndActivity=true&defaultDrawer=&autoPlay=true&mute=false" width="640" height="360" frameborder="0" scrolling="no" allowfullscreen> </iframe>

A random example feed -- a bald eagle nest compliments of Berry College.

You will need to make a couple of adjustments to your generated <iframe/> code to have it display well from your auction website as well as apply some custom CSS to the HTML-Row element.

First, remove the width="640" and height="360" parameters and add class="resp-iframe" (for the required custom CSS to make the video responsive).

Then you will need to wrap the <iframe/> with a <div class="resp-container"> element.

Now, add the required custom CSS using the Add Style Introduction To Advanced Styling   feature to the HTML-Row   element. The Vimeo Livestream video should now be responsive to all viewport sizes.

Learn about related topics:

HTML-Row
Reference page for HTML content element for the Auctria event website.
Embedded Content
Reference page for Embedded Content element for the Auctria event website.
Video Element Stylings
Learn about how to style the Video element in the Website Editor.
Add New Row
Learn how to add a new row to the event website using the Website Editor.

Last reviewed: November 2023