Iframe placeholders, security and resizing

components/dom_distiller/core/javascript/dom_distiller_viewer.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 function addToPage(html) {

[cjhopman, 2015/03/12 02:39:22]

Is this only called for pages 2+? Maybe we should change that...

[mdjones, 2015/03/14 02:04:44]

Done.

   var div = document.createElement('div');
   div.innerHTML = html;
   document.getElementById('content').appendChild(div);
+  fillYouTubePlaceholders();
+}
+
+function resizeIframes() {
+  iframeList = document.getElementsByTagName('iframe');
+  for (var i = 0; i < iframeList.length; i++) {
+    var ratio = iframeList[i].clientHeight / iframeList[i].clientWidth;
+    iframeList[i].width = iframeList[i].parentElement.clientWidth;
+    iframeList[i].height = iframeList[i].parentElement.clientWidth * ratio;
+  }
+}
+
+function fillYouTubePlaceholders() {
+  var placeholders = document.getElementsByClassName("embed-placeholder");
+  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('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);
+
+    parent.replaceChild(embed, placeholders[i]);
+  }
 }
 
 function showLoadingIndicator(isLastPage) {
   document.getElementById('loadingIndicator').className =
       isLastPage ? 'hidden' : 'visible';
   updateLoadingIndicator(isLastPage);
 }
 
 // Maps JS Font Family to CSS class and then changes body class name.
 // CSS classes must agree with distilledpage.css.
@@ skipping 48 matching lines @@
 }();
 
 // Add a listener to the "View Original" link to report opt-outs.
 document.getElementById('showOriginal').addEventListener('click', function(e) {
   var img = document.createElement('img');
   img.src = "/vieworiginal";
   img.style.display = "none";
   document.body.appendChild(img);
 }, true);
 
+window.addEventListener('orientationchange', function(e) {
+  // Wait for the page to have actually updated before resizing.
+  setTimeout(resizeIframes, 150);
+});
+
+window.addEventListener('resize', function(e) {
+  setTimeout(resizeIframes, 150);

[cjhopman, 2015/03/12 02:39:22]

How about using an approach like
http://flwebsites.biz/posts/proportional-responsive-iframes-youtube-videos for
this?

[mdjones, 2015/03/14 02:04:44]

Done.

+});
+
+window.addEventListener('load', function(e) {
+  fillYouTubePlaceholders();
+});
+