MMM-EmbedURL Not showing full webpage

khayfer

I have a question with MMM-EmbedURL. I got it working, but it only displays a small corner of the website. I am not sure how to resize the screen so more can be shown? The information I actually need displayed is in the middle of the webpage, is there a way to tell it to show me that instead of the whole page?

wishmaster270

@khayfer Hi,

there is an example included showing the config and css of how to do this in the module folder or online.

Edit: Sorry for the short answer. Was a little bit short of time and only had my mobile present…

If you want all embedded elements to have the same size you can use the example below and set width and height to your needs in your custom.css file:

.MMM-EmbedURL .embed .embeded {
    width: 800px;
    height: 400px;
}

Additionally you can set the size of the page within the embedded elements with the attributes configuration of the module:

{
  module: "MMM-EmbedURL",
  position: "top_center",
  header: "Embed-URL",
  config: {
    attributes: [
        "frameborder=0",
        "width=600px",
        "height=700px",
    ],
    embed: [
        "https://magicmirror.builders/"
    ]
  },
},

The example provided with the module is more advanced:

{
    module: "MMM-EmbedURL",
    position: "top_center",
    config: {
        updateInterval: 60*30,
        embed: [
            {
                title: "Kap-Arkona",
                classes: "videos",
                attributes: [
                    "frameborder=0",
                    "width=600px",
                    "height=700px",
                    "scrolling=no"
                ],
                embed: [
                    "https://kap-arkona.panomax.com/vitt?fbclid=IwAR1szX2TAt_HazyeF8dR1fwg5HjqhLiZSdtmbxWLCgWDpUVnPyIomQE3lrQ",
                ]
            },
        ]
    },
},

A webcam with a custom title “Kap-Arkona” and the additional classes “videos” is added with a width, height and the attribute scrolling=no set.

The class “videos” is used in the css to select only this specific embedded element:

.MMM-EmbedURL .embed .videos.embededSubWrapper1 {
    width    : 600px;
    height   : 400px;
    overflow : hidden;
    position : relative;
}
  
.MMM-EmbedURL .embed .embeded.videos {
    position : absolute;
    top: -138px;
    height: 750px;
    max-height: 750px;
}

and to position the website within the embedded element. This way elements at the top of the website are hidden.

khayfer

@wishmaster270 thank you! I was able to fix my issue

wishmaster270

@khayfer Perfect. Have fun with the module

plainbroke

@wishmaster270
Will this module support RSTP camera website?
Example:
rstp:/192.168.1.31:554/live ?

wishmaster270

@plainbroke Hi, sorry but as no browser supports RTSP nativ at the moment you can not embed it directly.

You will need to convert Rtsp to MPJPEG then it can be embedded.

plainbroke

@wishmaster270
Ok that might work out for the 1 camera I am wanting to show on the screen. Does MM support JavaScript or while I need to add it as a dependency?

wishmaster270

@plainbroke You will need a external tool like ffmpeg or vlc to convert the stream.
I wrote a small wrapper that calls vlc with the necessary parameters. You can find it here.
There are other tutorials using a docker containter, too. For me this one was the most effective one.
Be aware that the conversion cost a lot of cpu power. Some users had problems running the converter on the same Pi as the mirror is running on.

You then can embed the Stream with this module using the setting embedElementType: "img" or you can use my MMM-SynologySurveillance which supports mjpeg since the last version.