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.

    Display web widget on mirror through iFrame?

    Scheduled Pinned Locked Moved Troubleshooting
    60 Posts 9 Posters 64.4k Views 9 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.
    • E Offline
      eugekiller
      last edited by eugekiller

      Hi I am also having the same problem. I am trying to load a youtube playlist to iFrame. I cloned iFrame in to modules, then navigated in to it did npm install. Then put this in config.js

      var config = {
      port: 8080,

      language: 'en',
      timeFormat: 12,
      units: 'imperial',
      
      modules: [
      	{
      		module: 'alert',
      	},
      	{
      		module: 'clock',
      		position: 'top_right'
      	},
      	{
      		module: 'currentweather',
      		position: 'top_left',
      		config: {
      			location: 'New York',
      			locationID: '',  //ID from http://www.openweathermap.org
      			appid: '2159d1e91ad638a2b6face1e0cc76bce'
      		}
      	},
      	{
      		module: 'weatherforecast',
      		position: 'top_left',
      		header: 'Weather Forecast',
      		config: {
                    location: 'Totowa',
      			locationID: '5105455',  //ID from http://www.openweathermap.org
                       appid: '2159d1e91ad638a2b6face1e0cc76bce'
      		}
      	},
                  {
      		module: 'calendar',
      		header: 'Oksanas Calendar',
      		position: 'top_left',
      		config: {
      			calendars: [
      				{
      					symbol: 'calendar-check-o ',
      					url: 'NONE'
      				}
      			]
      		}
      	},
                  {
      		module: 'calendar',
      		header: 'TYLER JOBS',
      		position: 'top_right',
      		config: {
      			calendars: [
      				{
      					symbol: 'calendar-check-o ',
      					url: 'NONE'
      				}
      			]
      		}
      	},
      	{
      		module: 'calendar',
      		header: 'SHANE JOBS',
      		position: 'top_right',
      		config: {
      			calendars: [
      				{
      					symbol: 'calendar-check-o ',
      					url: 'NONE'
      				}
      			]
      		}
      	},
                  {
      module: 'MMM-Traffic',
      header: 'OFFICE DRIVE',
      position: 'bottom_right',
      classes: 'dimmed medium', //optional, default is 'bright medium', only applies to commute info not route_name
      config: {
          api_key: 'NONE',
          mode: 'driving',
          origin: '43 Madison St, Pequannock Township, NJ 07440',
          destination: '99 Dell Glen Avenue, Lodi, NJ 0764',
          arrival_time: '', //optional, but needs to be in 24 hour time if used.
          route_name: 'Home to Work',
          changeColor: true,
          showGreen: false,
          limitYellow: 5, //Greater than 5% of journey time due to traffic
          limitRed: 20, //Greater than 20% of journey time due to traffic
          traffic_model: 'pessimistic',
          interval: 120000 //2 minutes
      }
      },
      	{
      module: 'MMM-Traffic',
      header: 'Oksana Russian Office',
      position: 'bottom_left',
      classes: 'dimmed medium', //optional, default is 'bright medium', only applies to commute info not route_name
      config: {
          api_key: 'NONE',
          mode: 'driving',
          origin: '43 Madison St, Pequannock Township, NJ 07440',
          destination: '45 U.S. 46, Ridgefield Park, NJ 07660',
          arrival_time: '', //optional, but needs to be in 24 hour time if used.
          route_name: 'Home to Work',
          changeColor: true,
          showGreen: false,
          limitYellow: 5, //Greater than 5% of journey time due to traffic
          limitRed: 20, //Greater than 20% of journey time due to traffic
          traffic_model: 'pessimistic',
          interval: 120000 //2 minutes
      }
      },
                    {
          module: 'iFrame',
          position: 'bottom_bar', // This can be any of the regions.
          config: {
              // See 'Configuration options' for more information.
                  url: "<iframe width="560" height="315" src="https://www.youtube.com/embed/6kgH6kqNuWM?list=PL24DEF584E7DBB4CF" frameborder="0" allowfullscreen></iframe>"
                  width: "50px" // Optional. Default: 100%
                  height: "50px" //Optional. Default: 100px
              }
          }
      },
                    {
      		module: 'newsfeed',
      		position: 'top_bar',
      		config: {
      			feeds: [
      				{
      					title: "NEWS 12",
      					url: "http://newjersey.news12.com/cmlink/1.4124770#"
      				}
      			],
      			showSourceTitle: true,
      			showPublishDate: true
      		}
      	},
      ]
      
      1 Reply Last reply Reply Quote 0
      • yawnsY Offline
        yawns Moderator
        last edited by yawns

        I see several formatting errors (missing , and too many } ). I did not test it, but please try this instead. Oh, and please remove your api keys and your personal calendar urls before posting the config file on the internet :)

        {
        	module: 'iFrame',
        	position: 'bottom_bar', // This can be any of the regions.
        	config: {
        		// See 'Configuration options' for more information.
        		url: "https://www.youtube.com/embed/6kgH6kqNuWM?list=PL24DEF584E7DBB4CF",
        		width: "50px", // Optional. Default: 100%
        		height: "50px", //Optional. Default: 100px
        	}
        },
        
        E K 2 Replies Last reply Reply Quote 1
        • R Offline
          roramirez Core Contributors
          last edited by

          @kasperb @eugekiller as said @yawns, you need config only the URL not html code for iframe tag.

          Easy module development with MagicMirror Module Template

          1 Reply Last reply Reply Quote 0
          • E Offline
            eugekiller @yawns
            last edited by

            @yawns said in Display web widget on mirror through iFrame?:

            {
            module: ‘iFrame’,
            position: ‘bottom_bar’, // This can be any of the regions.
            config: {
            // See ‘Configuration options’ for more information.
            url: “https://www.youtube.com/embed/6kgH6kqNuWM?list=PL24DEF584E7DBB4CF”,
            width: “50px”, // Optional. Default: 100%
            height: “50px”, //Optional. Default: 100px
            }
            },

            Thanks that did it :). But one question any way to make it auto play?
            Right now it loads it but i have to use the mouse to hit play on it.

            1 Reply Last reply Reply Quote 0
            • R Offline
              roramirez Core Contributors
              last edited by

              Well, autoplay is a option of Youtube,

              Add autoplay=1 to url

              https://www.youtube.com/embed/6kgH6kqNuWM?list=PL24DEF584E7DBB4CF&autoplay=1

              Easy module development with MagicMirror Module Template

              1 Reply Last reply Reply Quote 1
              • E Offline
                eugekiller
                last edited by

                Thank You Guys worked like a charm. :)

                1 Reply Last reply Reply Quote 0
                • K Offline
                  kasperb @yawns
                  last edited by

                  @yawns Great, thanks so much, it’s working now :-)

                  1 Reply Last reply Reply Quote 0
                  • Mitch1138M Offline
                    Mitch1138
                    last edited by

                    I am able to get iFrame to display a widget and it works well, the the widget is not updated. Is there a way to force an update every 15 min or so?

                    Thanks, Mitch

                    R 1 Reply Last reply Reply Quote 0
                    • R Offline
                      roramirez Core Contributors @Mitch1138
                      last edited by

                      @Mitch1138 There no way to force update using iFrame. Its a something is possible add a option for autorefresh. I think will not difficult added. Why do you no try?

                      Easy module development with MagicMirror Module Template

                      1 Reply Last reply Reply Quote 1
                      • Mitch1138M Offline
                        Mitch1138
                        last edited by

                        Thanks, I like your confidence in my abilities! I will keep working on trying to find a way to update the link.

                        strawberry 3.141S 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 6
                        • 1 / 6
                        • 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