MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.24.0 is available! For more information about this release, check out this topic.

    How to create border around MMM-iFrame displaying YouTube stream

    Custom CSS
    3
    3
    312
    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.
    • ankonaskiff17
      ankonaskiff17 last edited by ankonaskiff17

      I want to put a border around the YouTube feed I am displaying via the MMM-iFrame module. I’m not a programmer but have tried setting a border via the module CSS multiple ways with no success. When I copy the embed code I see there is a border property but the module author, alberttwong, has me stripping out everything except the url and autoplay.

      https://www.youtube.com/embed/tHKvusCEic4?autoplay=1

      This is embed code from the YouTube share option minus the iframe start/stop because it was preventing me from pasting in YouTube code.

      width="560" height="315" src="https://www.youtube.com/embed/tHKvusCEic4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen

      I’ve tried various ways of plugging that option back in, to no avail. I also see that the YouTube player has some border options also but I’m stumped. Anyone have any suggestions?
      I hope I placed the code blocks correctly in this queston.

      S 1 Reply Last reply Reply Quote 0
      • S
        sdetweil @ankonaskiff17 last edited by sdetweil

        @ankonaskiff17 because the author doesn’t give you a specific class tag to modify, you need a css entry for that module that targets the iframe tag
        in MagicMirror/css/custom.css

        .modulename iframe {
        ...
        }
        

        then use the css attributes

        Sam

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 0
        • H
          hango last edited by hango

          Put in your custom.css

          .mmm-iframe-wrapper > iframe {
            border: solid 1px white;
          }
          

          or try my module https://github.com/cristearazvanh/yframe

          I am no longer interested in this project which is increasingly buggy and heavy.
          I have my own personal light version which works perfectly on line and local without electron shit and node.js.

          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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy