Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Canvas mobile - Custom embed user experience
* Custom CSS for improved Panopto / Canvas mobile app user experience.
* Style the alerts and links created while replacing Panopto embeds.
* By Korina Figueroa, Emerson College Instructional Technology Group
* Last updated May 30th, 2018
/* Unsupported content alert will have a red border with rounded edges. Text will be bold and centered. */
.warning-box {
text-align: center;
font-weight: bold;
border: 5px solid red;
border-radius: 10px;
/* Links replacing iframes will be centered and bolded. */
.replaced-iframe {
text-align: center;
font-weight: bold;
* Custom JS for improved Panopto / Canvas mobile app user experience.
* 1. Alert users to unsupported content
* 2. Replace unsupported iframes with direct links to content.
* By Korina Figueroa, Emerson College Instructional Technology Group
* Last updated June 1st, 2018
function replaceEmbed(frame,linkText) {
var newParagraph = document.createElement("p");
newParagraph.setAttribute("class", "replaced-iframe");
var newLink = document.createElement("a");
newLink.textContent = linkText; // What the users will actually see on the page
newLink.href = frame.src; // Users will be linked to the URL the iframe should have loaded
newLink.setAttribute("target", "_blank");
function customEmbedUX() {
// Customize the below variable with the desired iframe source URL you want to replace
var queryURL = 'iframe[src^=""]';
var embedList = document.querySelectorAll(queryURL);
if (embedList.length > 0) {
// Create the custom alert message to appear at the top of the page
var newAlert = document.createElement("p");
// Customize the below text according to your usage
newAlert.innerHTML = "<div class=\"warning-box\">Warning: Some video content on this page is not supported in Canvas mobile apps. For the best experience, please access this course via a browser.</div>";
// Get the container for all of the user entered content on the page
var pageContent = document.getElementById("content"); // The ID of the content in Android
if (pageContent == null) {
pageContent = document.getElementById("page"); // iOS uses this ID instead
var contentParent = pageContent.parentNode; // Reference the container that the user content is in
// Loop through all matching elements and replace them
for (var i = 0; i < embedList.length; i++) {
replaceEmbed(embedList[i], "Watch video");
/* Plain Javascript alternative to jQuery's $(document).ready()
* Credit:
* Likely not all of this is needed, but keeping it for the sake of covering bases.
// In case the document is already rendered
if (document.readyState!='loading') customEmbedUX();
// Modern browsers
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', customEmbedUX);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
if (document.readyState=='complete') customEmbedUX();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.