diff options
-rw-r--r-- | public/css/extra.css | 50 | ||||
-rw-r--r-- | public/js/extra.js | 31 |
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); |