Using an iFrame with the TelemetryTV HTML App to embed a OneDrive document

This article will outline how to embed an iFrame of a OneDrive document using the HTML app.

iFrames will allow you to embed content within a slide of your TelemetryTV playlist using the HTML app or the HTML overlay SDK. Often Software platforms may have an embed option where users can copy and paste HTML code from their application.

While TelemetryTV offers a powerful suite with many different turnkey app integrations ready to hand, the HTML SDK allows users to embed an iframe of plethora of embeddable software applications. These range from desktop publishing and data visualization dashboards to audio to multimedia streaming platforms.

CSS styling integration can enable you to customize and fit the content as desired, or even remove content entirely i.e. hiding an audio player embedded in the HTML overlay.

Embedding an OneDrive document using an iFrame

Go to https://onedrive.live.com/

2. Open the document

3. Click on the Menu

4. Select Embed

5. Copy the HTML Embed Code

Inserting the iFrame code in TelemetryTV

6. Go to Create App at app.telemetrytv.com and select HTML

7. Paste in the embed code from One Drive.

8. Above the iframe, insert the CSS style code between the <style> brackets below.

Example

<style>
body, html {
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0
}
</style>

<iframe src="https://onedrive.live.com/embed?cid=123123123123&amp;resid=12123123123%123123123123&amp;authkey=abc123abc123-OBo&amp;em=2&amp;wdStartOn=1"  height="100%" width="100%" margin="0" allowfullscreen frameborder="0" position="relative"></iframe>

☝️ Note: This <style> code will ensure that the iFrame is responsive and matches the screens attached to your signage players. You can click on Preview to verify your code.

9. Click on confirm

How to embed an iFrame using the HTML App

Embedding an OneDrive document using an iFrame

Inserting the iFrame code in TelemetryTV