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?
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.
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
httpsâŚyoutube.com/watch?v=X85ZNjlHrPk
and transforms it into:
httpsâŚyoutube.com/embed/X85ZNjlHrPk
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.
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â.
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.
andâŚ
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:
