Hi, beginner user here. I’m trying to build a simple page for a mockup app interface. I want the app (hosted on a separate url) to appear as a 1280x720 frame and be overlayed with the image of an LED TV to act as a border and make it look like the app is ‘on TV’.
I’m using ‘responsive embed’ to display my remotely hosted app on a page (which works) but I’ve run out of road trying to get the image to over (or under) lay it and be aligned. Example image such as: Redirect Notice
Any tips to help me back on track here? I’ve had a hunt through the forum but couldn’t find anything specifically relevant. Thanks!
I think you will need to place the image at the bottom of a div, then activate a div within it and then add the video.
The adjustments must be made to the div with the image, it will take a little work.
Maybe having a black background inside the area of the image where the video will be would help.
It’s certainly doable, but I would post your question in the Webdesign Help category, as this is not something Bootstrap Studio can do with any of the pre-made components, and you won’t find anything in the docs explaining how to do this. An effect like this will definitely require writing some custom CSS.
Just spitballing here, but I would think that since the content you want to display is hosted on a separate URL, you would probably embed it in an iframe using a Custom Code component, and then use CSS positioning rules and z-index to add a div on top of the iframe.
