Custom Live Streaming
For Vimeo Livestream feeds, it is a bit more involved as the "feed" is not coming from Vimeo directly and the Video element cannot use the Livestream feed as-is.
Embed iFrame With HTML Row Element
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 iFrames):
<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 Advanced Styling feature to the HTML-Row element. This will make the embedded video responsive to all screen sizes.
Required Custom CSS
.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.
Example: Embed Vimeo Livestream With HTML Row 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? 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 Advanced Styling feature to the HTML-Row element. The Vimeo Livestream video should now be responsive to all viewport sizes.
Last reviewed: February 2023