diff --git a/plugins/lazy-yt/assets/javascripts/lazyYT.js b/plugins/lazy-yt/assets/javascripts/lazyYT.js index 651ea9df48..92a3542a06 100644 --- a/plugins/lazy-yt/assets/javascripts/lazyYT.js +++ b/plugins/lazy-yt/assets/javascripts/lazyYT.js @@ -87,6 +87,8 @@ innerHtml.push(""); // .html5-title-text-wrapper innerHtml.push(""); // end of Video title .html5-info-bar + const prefetchedThumbnail = $el[0].querySelector(".ytp-thumbnail-image"); + $el .css({ "padding-bottom": padding_bottom @@ -108,17 +110,27 @@ thumb_img = "default.jpg"; } + if (prefetchedThumbnail) { + $el.find(".ytp-thumbnail").append(prefetchedThumbnail); + } else { + // Fallback for old posts which were baked before the lazy-yt onebox prefetched a thumbnail + $el + .find(".ytp-thumbnail") + .append( + $( + [ + '' + ].join("") + ) + ); + } + $thumb = $el .find(".ytp-thumbnail") - .css({ - "background-image": [ - "url(https://img.youtube.com/vi/", - id, - "/", - thumb_img, - ")" - ].join("") - }) .addClass("lazyYT-image-loaded") .on("click", function(e) { e.preventDefault(); diff --git a/plugins/lazy-yt/assets/stylesheets/lazyYT.css b/plugins/lazy-yt/assets/stylesheets/lazyYT.css index 134a535eb3..233c342c74 100644 --- a/plugins/lazy-yt/assets/stylesheets/lazyYT.css +++ b/plugins/lazy-yt/assets/stylesheets/lazyYT.css @@ -103,11 +103,12 @@ font-size: normal !important; font-weight: normal !important; line-height: 1 !important; - opacity: .9; + opacity: 0.9; + z-index: 935; } .ytp-large-play-button-svg { - opacity: .9; + opacity: 0.9; fill: #1f1f1f; } @@ -116,3 +117,10 @@ opacity: 1; fill: #cc181e; } + +.ytp-thumbnail-image { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; +} diff --git a/plugins/lazy-yt/plugin.rb b/plugins/lazy-yt/plugin.rb index 3665244463..4f5517c22a 100644 --- a/plugins/lazy-yt/plugin.rb +++ b/plugins/lazy-yt/plugin.rb @@ -25,6 +25,9 @@ class Onebox::Engine::YoutubeOnebox video_width = (params['width'] && params['width'].to_i <= 695) ? params['width'] : 480 # embed width video_height = (params['height'] && params['height'].to_i <= 500) ? params['height'] : 270 # embed height + og = get_opengraph.data + thumbnail_url = og[:image] || "https://img.youtube.com/vi/#{video_id}/hqdefault.jpg" + # Put in the LazyYT div instead of the iframe escaped_title = ERB::Util.html_escape(video_title) @@ -36,7 +39,7 @@ class Onebox::Engine::YoutubeOnebox data-height="#{video_height}" data-parameters="#{embed_params}"> - + EOF