depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

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

Browse source
This commit is contained in:
Wu Cheng-Han 2016-01-17 09:55:12 -06:00
parent 49c7dded45
commit 5c0a36f4d9
2 changed files with 62 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
public/css/extra.css
View file

@ -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,

31
public/js/extra.js
View file

@ -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);