The most reliable way to show a video on your Rise Vision display is to use the Video Full Screen Template.
But what if you want to show a video that’s only available online, or your video is actually being streamed live? It’s possible to embed most web content onto a Rise Vision display using the HTML template, but there are two things you need to know first:
- Embedding permissions are controlled by the content owner, so not all videos or streams can be embedded.
- Since the content is being embedded into Rise Vision from somewhere else, advertisements from the content owner may appear.
Here’s a quick video that goes over the whole process. Step-by-step instructions are below.
Step 1: Get your Embed code
Find the video you want to embed, and obtain its embed code. Usually you can do this by clicking “Share” and choosing “Embed”.
The embed code should begin with “<iframe” and end with “</iframe>”. Highlight the whole embed code and copy it.
Step 2: Create a presentation from the HTML template
Go to "presentations", click "add from template", and choose the HTML Embed template.
Step 3: Paste the Embed Code into the HTML embed component
Edit the HTML Embed component, clear the default code, and replace it with the code snippet you copied.
Step 4: Enable Autoplay and resize the content
Lastly, enable Autoplay and resize the content to fit your presentation. This will vary a bit from service to service, but here’s a sample embed code from YouTube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/SOME_VIDEO_ID_NUMBER" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
We need to add autoplay to the src. We'll also be using a code snippet to handle sizing, so delete the default height and width and replace them with a class, like in the example below.
<iframe class="container" src="https://www.youtube.com/embed/SOME_VIDEO_ID_NUMBER?autoplay=true" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
Next, copy this snippet of code below and paste it directly above the iframe tag to have it handle scaling.
<style> |
All that’s left to do is publish your presentation.
Now that your presentation is ready, you can add it to your schedule to start sharing it!