Responsive Embed with image 'surround' over lay

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.

1 Like

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, :rofl::rofl::rofl::rofl::rofl:

1 Like

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.

Easy solution:

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! :slight_smile:

1 Like

Very clever solution :+1: :brain:

1 Like