MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-EmbedURL Not showing full webpage

    Scheduled Pinned Locked Moved Solved Troubleshooting
    8 Posts 3 Posters 1.5k Views 3 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K Offline
      khayfer
      last edited by

      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?
      F95A2EDE-FE49-4095-851E-76813C100A5F.jpeg

      wishmaster270W 1 Reply Last reply Reply Quote 0
      • wishmaster270W Offline
        wishmaster270 Module Developer @khayfer
        last edited by 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.

        K 1 Reply Last reply Reply Quote 0
        • K Offline
          khayfer @wishmaster270
          last edited by

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

          wishmaster270W 1 Reply Last reply Reply Quote 0
          • wishmaster270W Offline
            wishmaster270 Module Developer @khayfer
            last edited by

            @khayfer Perfect. Have fun with the module

            plainbrokeP 1 Reply Last reply Reply Quote 0
            • plainbrokeP Offline
              plainbroke @wishmaster270
              last edited by plainbroke

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

              Slow learner. But trying anyways.

              wishmaster270W 1 Reply Last reply Reply Quote 0
              • wishmaster270W Offline
                wishmaster270 Module Developer @plainbroke
                last edited by

                @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.

                plainbrokeP 1 Reply Last reply Reply Quote 0
                • plainbrokeP Offline
                  plainbroke @wishmaster270
                  last edited by

                  @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?

                  Slow learner. But trying anyways.

                  wishmaster270W 1 Reply Last reply Reply Quote 0
                  • wishmaster270W Offline
                    wishmaster270 Module Developer @plainbroke
                    last edited by

                    @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.

                    1 Reply Last reply Reply Quote 0
                    • 1 / 1
                    • First post
                      Last post
                    Enjoying MagicMirror? Please consider a donation!
                    MagicMirror created by Michael Teeuw.
                    Forum managed by Sam, technical setup by Karsten.
                    This forum is using NodeBB as its core | Contributors
                    Contact | Privacy Policy