Blob as HTML for iFrame

by Julien Etienne

HTML

<h1>
IFrame Below uses blob as content
</h1>
<iframe>

</iframe>

<p>
works in Chrome, Safari, Firefox. Used for <a href="http://webglfundamentals.org/webgl/lessons/webgl-animation.html" target="_blank">a Codepen like editor without needing a server</a>. PS: The link won't present editors in Edge because it can't work around this issue. It will display editors in Firefox/Chrome/Safari
</p>

JavaScript

var html = `
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.0.2/hls.min.js"></script>
<script type="text/javascript" src="https://d3mfda3gpj3dw1.cloudfront.net/LCEVC_HTML/dil.js/liblcevc_dpi.js"></script>
<script type="text/javascript" src="https://d3mfda3gpj3dw1.cloudfront.net/LCEVC_HTML/dil.js/lcevc_dil.min.js"></script>
<script type="text/javascript" src="https://d3mfda3gpj3dw1.cloudfront.net/LCEVC_HTML/dil.js/lcevc_dil_patch_hls.js"></script>
<style>
body {
  background: grey;
  width: 100%;
  height: 100%;
  position: absolute;
}

[data-lcevc-player-url] {
  position: relative;
  float: left;
  width: 500px;
height: 300px;
  padding: 0;
  margin: 0;
  display: block;
}

</style>
</head>
<body>
<div id="player-controls-1" data-lcevc-player-url="https://d3mfda3gpj3dw1.cloudfront.net/vnVCommJVddTqCWj/master.m3u8"></div>
<div id="player-controls-2" data-lcevc-player-url="https://d3mfda3gpj3dw1.cloudfront.net/vnVCommJVddTqCWj/master.m3u8"></div>
<script>
// Get all video players with data-lcevc-player-url attributes. 
const players = Array.from(document.querySelectorAll('[data-lcevc-player-url]'));

// Reuse the config or use different ones per video. 
const lcevcDilConfig = {
  playerControls: {
    controlsID: 'player-controls',
    enabled: true,
    toggleButton: true
  }
};

// For each video get the url and setup the simple player.
players.forEach((player) => {
  const url = player.getAttribute('data-lcevc-player-url');
  lcevcDilHlsSimplePlayer(url, player, {
    playerControls: {
      controlsID: player.id + 'abc',
      enabled: true,
      toggleButton: true
    }
  });
});

</script>
`;

var blob = new Blob([html], {type: 'text/html'});
var iframe = document.querySelector("iframe");
iframe.src = URL.createObjectURL(blob);