JSFiddle - React, Tailwind, and code Playground
HTML
<h1 class="edx-ip"></h1>
<iframe width="640" height="360" data-edx-internal="http://video.isites.harvard.edu/liveVideo/liveEmbed.do?name=HLS1x_copyright&width=auto&height=auto"
data-edx-external="http://video.isites.harvard.edu/liveVideo/liveEmbed.do?name=HLS1x_copyright_global&width=auto&height=auto"></iframe>
JavaScript
$(function () {
$.getJSON("http://api.hostip.info/get_json.php").done(function (result) {
var ip = result.ip;
var harvard = false;
var $iframe, src;
if (result.ip.substr(0, 3) === "140") {
ip += " (Harvard)";
harvard = true;
}
// push IP & flag to debug element if present
$(".edx-ip").text(ip);
$("iframe").each( function() {
// check every iframe for edx data
$iframe = $(this);
src = null;
if ( harvard ) {
src = $iframe.data( "edx-internal" );
} else {
src = $iframe.data( "edx-external" );
}
if ( src ) {
// actually change the iframe's src
$iframe.attr( "src", src );
}
} );
});
});