MMM-Embed URL centered on fullscreen_above?

BKeyport

I can’t figure out how to have MMM-EmbedURL to center the embedded item on fullscreen_above.

Can someone help out?

EmbedURL is apparently going full width.

wishmaster270

@BKeyport
Instead of setting the spacing with absolute values (like sam does) you can try to set the wrapper which contains the embedded elements to add equal spacing if the elements do not need the whole space.
The wrapper is a flexbox container:

.MMM-EmbedURL .embed .embededSubWrapper0 {
  justify-content: center;
}

sdetweil

@BKeyport css? z-index : xx

xx is a positive number: 0 is default
To position
Width/height
Left/top

BKeyport

@sdetweil I’m using full screen above for a “zoomed in” view of a camera. Naturally, MMM-EmbedURL is taking the entire screen as it should, except the embedded content is 4:3 and the screen is 16:9

I want the embedded content to be centered horizontally, and can’t figure a way to do that. the content is correctly taking 100% of top to bottom.

sdetweil

@BKeyport I’d ask Tom via an issue on the module GitHub

wishmaster270

@sdetweil @bkeyport
Hi… I’m here 😉

Sorry, but I need some more information.
Can you share your config and a screenshot which shows the current view and a hint what you want to achieve please?

sdetweil

@wishmaster270 I think the requirements are here

https://forum.magicmirror.builders/post/130079

Don’t know config

BKeyport

@wishmaster270

Config stub:

               {
                        module: "MMM-EmbedURL",
                        position: "fullscreen_above",
                        classes: "camera1",
                        config: {
                                updateInterval: 0,
                                animationSpeed: 0, 
                                appendTimestamp: false,
                                attibutes: [],
                                embed: [
                                        "http://192.168.0.7/picture/1/frame/"
                                ],
                        },
                },

The camera stream should be centered left/right. The camera feed is 4x3. (scaled from 640x480 due to how I have to get the feed at this time) and will always stretch the vertical to 100%

(note: screenshot isn’t actual screen resolution)

sdetweil

@BKeyport also, you should be able to see the html element used to display the web view in the developers window elements tab and relocate it w css

BKeyport

@sdetweil Indeed, I can see it in develop mode, but everything I’ve tried has failed, which is why I’m here.

sdetweil

@BKeyport I’m sure you need

.MMM-EmbedURL Element-name {
   position :absolute;
   left:10vw;  /* move 10% towards the right +/
}

wishmaster270

@BKeyport
Instead of setting the spacing with absolute values (like sam does) you can try to set the wrapper which contains the embedded elements to add equal spacing if the elements do not need the whole space.
The wrapper is a flexbox container:

.MMM-EmbedURL .embed .embededSubWrapper0 {
  justify-content: center;
}

BKeyport

@wishmaster270 Doh! Was using the wrong css item.

<internally screaming at CSS>