• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

How to create border around MMM-iFrame displaying YouTube stream

Scheduled Pinned Locked Moved Custom CSS
3 Posts 3 Posters 571 Views 2 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.
  • A Offline
    ankonaskiff17
    last edited by ankonaskiff17 Oct 8, 2020, 1:49 PM Oct 8, 2020, 1:42 PM

    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 Oct 8, 2020, 1:52 PM Reply Quote 0
    • S Offline
      sdetweil @ankonaskiff17
      last edited by sdetweil Oct 8, 2020, 1:53 PM Oct 8, 2020, 1:52 PM

      @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

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • ? Offline
        A Former User
        last edited by A Former User Aug 2, 2022, 5:27 PM Oct 8, 2020, 4:50 PM

        This post is deleted!
        1 Reply Last reply Reply Quote 0
        • 1 / 1
        1 / 1
        • First post
          1/3
          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