MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

How to create border around MMM-iFrame displaying YouTube stream



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



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


  • Module Developer

    Put in your custom.css

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

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


Log in to reply