Embedding videos from servers

Elements
1

Hello; long-time reader, first time caller.

I’m a filmmaker moving my website off Squarespace to a European service (Bunny) for geopolitical reasons. I have faith that Elements will trump Squarespace in the near future!

As a filmmaker I have a lot of videos to include and I’m having problems as they’re on servers so I must use HTML snippets to draw on their built-in players. It’s approaching the limits of my technical expertise but I worked it out.

It’s a bit frustrating that placing those HTML snippets in my design completely throws off the design; it’s not very WISIWIG! Will it be possible to preview iFrames in the workspace in the future I wonder?

Also, I realise that if I later drag the HTML component I’ve added to embed the snippet, across from the components toolbox onto another webpage, it brings across the same bit of code, and changing that code then alters the original usage of the component on the other page! I got very confused by this. Maybe an incrementing number next to each new HTML component in the component inspector would clarify that.

Anyway, I finally realised I must create a new custom HTML component for every video. But being on Elements Base I’m only allowed 3 Custom Components. So I can only embed 3 server-based videos in my project, is that right?! That’s a problem, unless there’s a workaround?

I’m moving away from Vimeo/YouTube too, so my new CDN / webhost Bunny.net typically give me either a URL like this

https://iframe.mediadelivery.net/play/428260/903b389d-b388-42e2-a0b2-9712cecc38e9

or this snippet like this

<div style="position: relative; padding-top: 56.25%;">
<iframe src="https://iframe.mediadelivery.net/embed/428260/903b389d-b388-42e2-a0b2-9712cecc38e9?autoplay=true"
loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true">
</iframe>
</div>

Thanks!

Adam

2

Hi Adam,

You can do this with one component using a property.

Setup your HTML Component template to look like this:

<div style="position: relative; padding-top: 56.25%;">
<iframe src="https://iframe.mediadelivery.net/embed/{{videoId}}?autoplay=true"
loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true">
</iframe>
</div>

Setup your Properties to look like this:

{
    "groups": [{
        "title": "Server Based Video",
        "properties": [{
            "title": "Video ID",
            "id": "videoId",
            "text": {
                "default" : "",
                "subtitle" : "Enter video ID above e.g. nnnnn/nnnnnnnnn",
            }
        }]
    }]
}

You can then enter each video id e.g. 428260/903b389d-b388-42e2-a0b2-9712cecc38e9 in the property for each HTML Component.

CleanShot 2025-05-20 at 11.16.08
CleanShot 2025-05-20 at 11.16.082132×403 54.1 KB

CleanShot 2025-05-20 at 11.16.26
CleanShot 2025-05-20 at 11.16.261234×384 30.3 KB

1 Like
3

Crikey, that’s brilliant; thank you Jon!

You’ve even persuaded me to try my hand at adapting it for YouTube. YouTube’s standard share embed code isn’t responsive, so if it helps anyone, here’s the responsive code I found elsewhere, modified to refer to your {{videoId}} input. Many thanks, once again!

<div style="display: flex; justify-content: center;">
  <iframe style="aspect-ratio: 16 / 9; width: 100% !important;" src="https://www.youtube.com/embed/{{videoId}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

PS. and, solving my own conundrum of how to rename the HTML component, for now (v.0.8.5) one must double-click the word “HTML” atop the HTML inspector window to enter a new name.

2 Likes