Canvas mobile - Custom embed user experience

custom_mobile.css

/* 
* 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;
    font-size:14pt;
    border: 5px solid red;
    border-radius: 10px;
    padding:10px;
}

/* Links replacing iframes will be centered and bolded. */
.replaced-iframe {
    text-align: center;
    font-weight: bold;
}

custom_mobile.js

/* 
* 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");
    
    newParagraph.appendChild(newLink);
    
    frame.parentNode.replaceChild(newParagraph,frame);
}

function customEmbedUX() {
    // Customize the below variable with the desired iframe source URL you want to replace
    var queryURL = 'iframe[src^="https://emerson.hosted.panopto.com/"]';
    
    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
        contentParent.insertBefore(newAlert,pageContent);

        // 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: https://plainjs.com/javascript/events/running-code-when-the-document-is-ready-15/
*   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();
});