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

Display web widget on mirror through iFrame?

Scheduled Pinned Locked Moved Troubleshooting
60 Posts 9 Posters 59.5k 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 Dec 6, 2016, 2:29 PM Dec 6, 2016, 1:59 PM

    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
    • Y Offline
      yawns Moderator
      last edited by yawns Dec 6, 2016, 2:08 PM Dec 6, 2016, 2:07 PM

      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 Dec 6, 2016, 2:36 PM Reply Quote 1
      • R Offline
        roramirez Core Contributors
        last edited by Dec 6, 2016, 2:25 PM

        @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 Dec 6, 2016, 2:36 PM

          @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 Dec 6, 2016, 2:38 PM

            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 Dec 6, 2016, 2:52 PM

              Thank You Guys worked like a charm. :)

              1 Reply Last reply Reply Quote 0
              • K Offline
                kasperb @yawns
                last edited by Dec 7, 2016, 1:47 AM

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

                1 Reply Last reply Reply Quote 0
                • Mitch1138M Offline
                  Mitch1138
                  last edited by Jan 17, 2017, 6:24 PM

                  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 Jan 18, 2017, 12:19 AM Reply Quote 0
                  • R Offline
                    roramirez Core Contributors @Mitch1138
                    last edited by Jan 18, 2017, 12:19 AM

                    @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 Jan 18, 2017, 1:45 PM

                      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 Jan 18, 2017, 1:58 PM 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