JSFiddle - React, Tailwind, and code Playground

by nocircleno

HTML

<!-- the player.html page has the smart player video code on it -->
<iframe width="480px" height="360px" scrolling="no" src="player.html" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

JavaScript

var onVideoEvent = function(e) {
    var video = e.currentTarget;
    // use the video src as an id
    var videoSrc = video.getElementsByTagName("source")[0].src;
    var eventType = e.type;
    // save the event somewhere
}

function bindPlayEventsToIframeVideos() {
    var videos, video, iframeDocument, iframes;
    
    iframes = document.getElementsByTagName("iframe")

    for(var i=0; i<iframes.length; i++) {
        iframeDocument = iframes[i].contentDocument;
        videos = iframeDocument.getElementsByTagName("video");
        if(videos.length > 0) {
            video = videos[0];
            // add events you want to listen
            video.addEventListener("play", onVideoEvent);
        }
    } 
}

bindPlayEventsToIframeVideos();