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.
I don’t know if this is what you want, but if so, just inspect the site’s code.
You can clone the model
Configuring the rest is up to you,
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.
Just use the ‘base’ of the monitor and give the iframe a border, then add the base directly below.
This is perfect! Thanks so much for your help!