Webpages and Embedded HTML on a Display

Why a webpage or embedded HTML widget previews correctly in easyCMS but shows blank on screen, framing restrictions, HTTPS, logins, and the render-mode settings that fix it.

“It works in the preview but the screen is blank” is the usual complaint with web pages, and it is not a bug. Here is why, and the fixes in order.

Studio has no web page template. Web pages and embedded HTML go on a layout in the advanced editor: in Studio’s account menu, choose Switch to classic easyCMS, then Open classic easyCMS.

Why the preview and the screen differ

Your preview The player
Login Your browser is signed in Signed in as nobody, so it gets a login page or a blank page
Framing Often allowed Most sites forbid being shown inside another page
http:// content May load Blocked inside an https:// page
Browser engine Up-to-date desktop browser Older and stricter, especially on smart TVs and cheap Android boxes

Fixes, most likely first

  1. Test the URL on the device itself. Open the device’s own browser and load the exact address. If it fails there, fix the network, certificate or login first. This test solves most cases.
  2. Switch the render mode to Open Natively. The player then loads the page in its own browser, which gets around sites that refuse to be framed. It fills its whole area, cannot sit under other content, and has no preview in easyCMS, so check it on the screen. Manual Position and Best Fit frame the page and follow every framing rule above. Open Natively works only on Android and Windows. On LG webOS, a site that refuses framing will not show in any mode: use another address, or a page you control.
  3. Use HTTPS with a valid public certificate. Self-signed and expired certificates fail silently. An internal certificate must be installed as trusted on the device.
  4. Remove the login. A screen cannot type a password. Use a read-only or public link instead.
  5. Keep the page light. Heavy JavaScript, WebGL, autoplaying media and third-party web fonts fail more often on player hardware. Where you can, make a simple signage version.

On Windows, one stubborn widget can be switched to the newer Edge engine by putting <!-- BROWSER=edge --> on the first line of its embedded HTML.

Dashboards

BI and analytics dashboards almost always block embedding and need a login. Use the tool’s own public link, publish to web or read-only sharing option: it gives an address made to be embedded.

Embedded HTML

A blank embedded-HTML widget usually means:

  • Scripts loaded over http://, or from a domain the device cannot reach.
  • Code that assumes a desktop screen size.
  • Broken markup. An unclosed tag can stop the whole layout from playing: see Scheduled Content Is Not Playing.

Tip Test with something trivial first, a coloured block with some text. Then add your real code back a piece at a time.

Not a fault: a layout with a web page often shows an orange exclamation mark instead of a green tick. easyCMS cannot check a live page. It still plays.

Related articles: Creating Layouts, Dynamic Content with DataSets, Network Requirements and Firewall Rules