Iframe placeholders, security and resizing

components/dom_distiller/core/javascript/dom_distiller_viewer.js

Index: components/dom_distiller/core/javascript/dom_distiller_viewer.js
diff --git a/components/dom_distiller/core/javascript/dom_distiller_viewer.js b/components/dom_distiller/core/javascript/dom_distiller_viewer.js
index 55f53bbf3854feaebdf305bed92df2acce7a9ef2..da2c0cfd800d9d6cf0dc99764bbbf717d601b9b7 100644
--- a/components/dom_distiller/core/javascript/dom_distiller_viewer.js
+++ b/components/dom_distiller/core/javascript/dom_distiller_viewer.js
@@ -6,6 +6,37 @@ function addToPage(html) {
   var div = document.createElement('div');
   div.innerHTML = html;
   document.getElementById('content').appendChild(div);
+  fillYouTubePlaceholders();
+}
+
+function fillYouTubePlaceholders() {
+  var placeholders = document.getElementsByClassName("embed-placeholder");

[cjhopman, 2015/03/19 03:34:47]

s/"/'/g

[mdjones, 2015/03/19 18:08:39]

Done.

+  for (var i = 0; i < placeholders.length; i++) {
+    if (!placeholders[i].hasAttribute('data-type') ||
+        placeholders[i].getAttribute('data-type') != 'youtube' ||
+        !placeholders[i].hasAttribute('data-id')) {
+      continue;
+    }
+    var embed = document.createElement('iframe');
+    var url = 'http://www.youtube.com/embed/' +
+        placeholders[i].getAttribute('data-id');
+    embed.setAttribute('class', 'youtubeIframe');
+    embed.setAttribute('src', url);
+    embed.setAttribute('type', 'text/html');
+    embed.setAttribute('frameborder', '0');
+
+    var parent = placeholders[i].parentElement;
+    var width = parent.clientWidth;
+    var hdMult = 1080.0 / 1920.0; // YouTube frame width/height is always HD.
+    embed.setAttribute('width', width);
+    embed.setAttribute('height', width * hdMult);

[cjhopman, 2015/03/19 03:34:47]

Are these needed? Aren't they set by css now?

[mdjones, 2015/03/19 18:08:39]

Done.

+
+    var container = document.createElement('div');
+    container.setAttribute('class', 'youtubeContainer');
+    container.appendChild(embed);
+
+    parent.replaceChild(container, placeholders[i]);
+  }
 }
 
 function showLoadingIndicator(isLastPage) {
@@ -73,4 +104,3 @@ document.getElementById('showOriginal').addEventListener('click', function(e) {
   img.style.display = "none";
   document.body.appendChild(img);
 }, true);
-