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.

    Introducing MMM-YouTubeWebView Module

    Scheduled Pinned Locked Moved Entertainment
    youtubewebviewembed
    7 Posts 4 Posters 1.6k Views 5 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.
    • doctorwhenD Offline
      doctorwhen
      last edited by

      I have released the initial version of the MMM-YouTubeWebView MagicMirror module at https://gitlab.com/doctorfree/MMM-YouTubeWebView

      This module allows embedding of YouTube videos, either singly or as a list of YouTube video IDs, or as a public YouTube playlist ID. The module uses the Electron webview tag rather than an iframe in an attempt to avert YouTube blocking the requested video for any of several reasons.

      The webview tag is used to embed ‘guest’ content in the MagicMirror Electron app. The guest content is contained within the webview container. An embedded page within MagicMirror controls how the guest content is laid out and rendered.

      Unlike an iframe, the webview runs in a separate process than MagicMirror. It doesn’t have the same permissions and all interactions between MagicMirror and embedded content will be asynchronous. This keeps MagicMirror safe from the embedded content.

      Under the hood webview is implemented with Out-of-Process iframes (OOPIFs).
      The webview tag is essentially a custom element using shadow DOM to wrap an
      iframe element inside it. So the behavior of webview is very similar to a
      cross-domain iframe. As such, it can be used to safely avoid cross-domain
      policy restrictions that may prevent access to web content.

      This module is based upon both the MMM-WebView module and the MMM-EmbedYoutube module with added functionality. There are some limitations to embedding with webview. These are detailed in the README. There may be a better way to do what I have done here. Possibly I should be using the Electron BrowserView instead. I would be open to suggestion. However, this release does accomplish what I set out to do - I can play my YouTube playlists and lists of YouTube videos without YouTube telling me the video is unavailable which is what I was seeing when using an iframe.

      This is the initial release so I expect there will be significant changes in the near term. I’ve thoroughly tested it but expect issues will arise. The module is a work-in-progress and in active development.

      Any feedback will be greatly appreciated.

      KristjanESPERANTOK M 2 Replies Last reply Reply Quote 5
      • KristjanESPERANTOK Online
        KristjanESPERANTO Module Developer @doctorwhen
        last edited by KristjanESPERANTO

        Hi @doctorwhen! Thanks for this module! :-)

        I tried to get it to run, but it just doesn’t. I don’t get an error message, just a black screen. I am using node version 18 and the latest version of MagicMirror.

        Does the module work for you (or for someone else) with current versions?

        That’s my config:

        {
            module: "MMM-YouTubeWebView",
            position: "middle_center", 
            config: {
              video_id: "w3jLJU7DT5E", 
              video_list: [
                "CtVyl402W5s", 
                "wmUVy43tqw4",
                "J_TxPQKcG7w", 
                "avWZsKyuRVE",
                "IpkIGGJMHBA", 
                "B9zgwx6mhrk",
                "6KvTDeHlIfI"
              ],
              autoplay: true,
              controls: true,
              loop: true,
              modestbranding: true,
              width: "800px",
              height: "450px"
            }
          }
        
        S 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @KristjanESPERANTO
          last edited by

          @KristjanESPERANTO if you open the developers window console tab view,
          do you see any errors. this module is all in browser

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          KristjanESPERANTOK 1 Reply Last reply Reply Quote 0
          • KristjanESPERANTOK Online
            KristjanESPERANTO Module Developer @sdetweil
            last edited by KristjanESPERANTO

            if you open the developers window console tab view, do you see any errors. this module is all in browser

            Unfortunately, I can’t see any errors there.

            Initializing MagicMirror².
            translator.js:122 Loading core translation file: translations/en.json
            VM4 sandbox_bundle:2 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
              Policy set or a policy with "unsafe-eval" enabled. This exposes users of
              this app to unnecessary security risks.
            
            For more information and help, consult
            https://electronjs.org/docs/tutorial/security.
            This warning will not show up
            once the app is packaged.
            warnAboutInsecureCSP @ VM4 sandbox_bundle:2
            translator.js:138 Loading core translation fallback file: translations/en.json
            loader.js:165 Load script: modules/default/clock/clock.js
            module.js:484 Module registered: clock
            loader.js:138 Bootstrapping module: clock
            loader.js:165 Load script: vendor/node_modules/moment/min/moment-with-locales.js
            loader.js:165 Load script: vendor/node_modules/moment-timezone/builds/moment-timezone-with-data.js
            loader.js:165 Load script: vendor/node_modules/suncalc/suncalc.js
            loader.js:142 Scripts loaded for: clock
            loader.js:180 Load stylesheet: modules/default/clock/clock_styles.css
            loader.js:145 Styles loaded for: clock
            loader.js:148 Translations loaded for: clock
            loader.js:165 Load script: modules/MMM-YouTubeWebView/MMM-YouTubeWebView.js
            module.js:484 Module registered: MMM-YouTubeWebView
            loader.js:138 Bootstrapping module: MMM-YouTubeWebView
            loader.js:142 Scripts loaded for: MMM-YouTubeWebView
            loader.js:145 Styles loaded for: MMM-YouTubeWebView
            loader.js:148 Translations loaded for: MMM-YouTubeWebView
            loader.js:180 Load stylesheet: css/custom.css
            clock.js:49 Starting module: clock
            module.js:45 Starting module: MMM-YouTubeWebView
            main.js:608 All modules started!
            
            1 Reply Last reply Reply Quote 0
            • M Offline
              mmmmh Project Sponsor @doctorwhen
              last edited by

              @doctorwhen Is there a way to control a video’s volume? I embedded the ISS’s livestream and I would like to mute it since every once in a while some radio chatter is on the audio channel. When I have the module hidden it is kinda eerie.

              KristjanESPERANTOK 1 Reply Last reply Reply Quote 0
              • KristjanESPERANTOK Online
                KristjanESPERANTO Module Developer @mmmmh
                last edited by

                @mmmmh MMM-ISS-Live has a mute option.

                M 1 Reply Last reply Reply Quote 0
                • M Offline
                  mmmmh Project Sponsor @KristjanESPERANTO
                  last edited by

                  @KristjanESPERANTO Now that’s a whole new approach. Thanks, it works!

                  1 Reply Last reply Reply Quote 1
                  • 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