Embedding a Loom video in UI builder

I am trying to emded a loom video in UI builder.

Loom provides an embed code which works in other website builders using some sort of code block.

Here is the code:

<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/d1064fee09214f6c894874772269f4ae" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

In UI Builder, I am trying to use the video block.

Adding the url to the video block works fine:

But if I try to use logic, it does not and I receive the following error message: Refused to display ' https://www.loom.com/ ' in a frame because it set 'X-Frame-Options' to 'deny'. Loom normally asks you to use their own embed code, namely <div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src=" https://www.loom.com/embed/d1064fee09214f6c894874772269f4ae " frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div> .

Is there a way to embed sth like this in UI Builder?

Can you describe what logic you try to use?

Also, if you create a simple page where reproduce this behavior and provide app id, that could speed up resolving the issue.

Regards, Dima

While preparing the simple page for you, I found the solution.

For anyone looking at something similar, Loom (and I guess other similar services) has a different url when sharing or embedding a video. So I simply modified the urls in my DB to use their embed syntax and it worked.

1 Like

Hi everyone, adding on to this ticket because I’ve discovered that the “embed” being required in the url is not just something Loom requires… it’s also true for YouTube. The REAL issue is that the ‘Video’ component in Backendless does something sophisticated when you enter a URL into the “Source” field in UI Builder: it manipulates a link such as


and transforms it into:


It does this in a sneaky “magic” way… so when you paste in the original “watch” link, then navigate somewhere else (like to a logic area), then return to the UI Builder page, you will find that the link has been magically transformed into an “embed” link. Kind of cool… but also very strange.

Now, the problem is that when we use the logic area for “source URL” of the ‘Video’ component, no transformation of the link takes place. So when using a “non-embed” link such as https…youtube.com/watch?v=X85ZNjlHrPk, the player will not play the video, you get an error about ‘X-Frame-Options’. Full explanation of the issue is here.

In short, in order to use the logic area for ‘Source URL’ for the Video component, we need to create special logic along the lines of what @Andreas_Marinopoulos has shown above (but somewhat different for YouTube and probably other services). Sadly, the Video component treats the Source URL in the UI Builder field differently from the Source URL defined in the logic area.

1 Like

@Alex_Klein It’s a good observation.

Of course, converting the URL in this way is only possible because YouTube provides multiple URL formats to begin with. I wouldn’t quite think of it as “magically transformed”. :wink:

In YouTube’s case there are enough URL formats to make you dizzy.

Loom similarly offers a URL format specifically for embedding, and they provide information about embedding in their support documentation:
How to embed your video into a webpage

The conversion of the link to adhere to YouTube’s “embed” URL format by Backendless could be for reasons of optimization, user experience, or simply compliance with YouTube’s policies.

A Stack Overflow user asked how to achieve YouTube embedding without the “embed” URL.
Relevant replies included:

The problem is that YouTube (or any website, really) knows if you try to embed it. This way, it most probably will not let you do that.


There’s no magical way to embed a page without embedding it. You can try to scrape YouTube from BE but it’s illegal & not going to work anyways.

Well, this thread already has a solution, so I will leave it at this. But maybe the additional links will be helpful or satisfy people’s curiosity.

Just saying: the UI Builder “SourceURL” field lets you enter any kind of YouTube link, which gets transformed somewhere in the guts of the component. The Logic area “SourceURL” does not do any such transformation, it’s up to us to massage the link. Like so:

1 Like

Thanks for sharing the logic that worked for you.
It’s a useful example of regex use.