Updated external media layouts, too keep its ratio and enlarge to 100% width

2 files changed, 62 insertions, 19 deletions

diff --git a/public/css/extra.css b/public/css/extra.css
index 8d91f529..186eb910 100644
--- a/public/css/extra.css
+++ b/public/css/extra.css
@@ -5,21 +5,43 @@
     position: relative;
     cursor: pointer;
     display: table;
-    max-width: 540px;
+    width: 100%;
     text-align: center;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: contain;
     background-color: black;
+    overflow: hidden;
+}
+/* youtube always use 16:9 aspect ratio video */
+.youtube {
+    position: relative;
+    width: 100%;
+    padding-bottom: 56.25%;
+}
+.vimeo img {
+    width: 100%;
+    object-fit: contain;
+    z-index: 0;
 }
-.vimeo img,
 .youtube img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
     position: absolute;
-    margin: auto;
     top: 0;
     left: 0;
-    right: 0;
-    bottom: 0;
+    z-index: 0;
+}
+.vimeo iframe,
+.youtube iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    z-index: 1;
 }
 .vimeo .icon,
 .youtube .icon {
@@ -34,6 +56,7 @@
     opacity: 0.3;
     -webkit-transition: opacity 0.2s; /* Safari */
     transition: opacity 0.2s;
+    z-index: 0;
 }
 .vimeo:hover .icon,
 .youtube:hover .icon {
@@ -41,6 +64,23 @@
     -webkit-transition: opacity 0.2s; /* Safari */
     transition: opacity 0.2s;
 }
+
+.slideshare .inner,
+.speakerdeck .inner {
+    position: relative;
+    width: 100%;
+}
+.slideshare .inner iframe,
+.speakerdeck .inner iframe {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+}
+
 h1:hover .header-link,
 h2:hover .header-link,
 h3:hover .header-link,
diff --git a/public/js/extra.js b/public/js/extra.js
index e624bfaf..e6f90b68 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -285,7 +285,15 @@ function finishView(view) {
                 jsonp: 'callback',
                 dataType: 'jsonp',
                 success: function (data) {
-                    $(value).html(data.html);
+                    var $html = $(data.html);
+                    var iframe = $html.closest('iframe');
+                    var caption = $html.closest('div');
+                    var inner = $('<div class="inner"></div>').append(iframe);
+                    var height = iframe.attr('height');
+                    var width = iframe.attr('width');
+                    var ratio = (height / width) * 100;
+                    inner.css('padding-bottom', ratio + '%');
+                    $(value).html(inner).append(caption);
                 }
             });
         });
@@ -310,8 +318,12 @@ function finishView(view) {
                     var src = iframe.attr('src');
                     if (src.indexOf('//') == 0)
                         iframe.attr('src', 'https:' + src);
-                    iframe.css('max-width', '100%');
-                    iframe.attr('width', '540').attr('height', (540 * ratio) + 15);
+                    var inner = $('<div class="inner"></div>').append(iframe);
+                    var height = iframe.attr('height');
+                    var width = iframe.attr('width');
+                    var ratio = (height / width) * 100;
+                    inner.css('padding-bottom', ratio + '%');
+                    $(value).html(inner);
                 }
             });
         });
@@ -517,19 +529,12 @@ function smoothHashScroll() {
     }
 }
 
-function setSizebyAttr(element, target) {
-    var width = $(element).attr("width") ? $(element).attr("width") : '100%';
-    var height = $(element).attr("height") ? $(element).attr("height") : '360px';
-    $(target).width(width);
-    $(target).height(height);
-}
-
 function imgPlayiframe(element, src) {
     if (!$(element).attr("videoid")) return;
     var iframe = $("<iframe frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>");
     $(iframe).attr("src", src + $(element).attr("videoid") + '?autoplay=1');
-    setSizebyAttr(element, iframe);
-    $(element).html(iframe);
+    $(element).find('img').css('visibility', 'hidden');
+    $(element).append(iframe);
 }
 
 var anchorForId = function (id) {
@@ -720,7 +725,6 @@ var youtubePlugin = new Plugin(
         var videoid = match[1];
         if (!videoid) return;
         var div = $('<div class="youtube raw"></div>');
-        setSizebyAttr(div, div);
         div.attr('videoid', videoid);
         var thumbnail_src = '//img.youtube.com/vi/' + videoid + '/hqdefault.jpg';
         var image = '<img src="' + thumbnail_src + '" />';
@@ -740,7 +744,6 @@ var vimeoPlugin = new Plugin(
         var videoid = match[1];
         if (!videoid) return;
         var div = $('<div class="vimeo raw"></div>');
-        setSizebyAttr(div, div);
         div.attr('videoid', videoid);
         var icon = '<i class="icon fa fa-vimeo-square fa-5x"></i>';
         div.append(icon);