UX: Make youtube embeds full width by default (#10106)

* UX: Make youtube embeds full width by default

* UX: Make youtube embeds fluid by default actually

* Remove double sizes in yt-lazy
This commit is contained in:
Rafael dos Santos Silva 2020-06-23 17:21:36 -03:00 committed by GitHub
parent 4a189f396e
commit 4c543b4a49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -22,8 +22,11 @@ class Onebox::Engine::YoutubeOnebox
def to_html def to_html
if video_id && !params['list'] if video_id && !params['list']
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 size_restricted = [params['width'], params['height']].any?
video_width = (params['width'] && params['width'].to_i <= 695) ? params['width'] : 690 # embed width
video_height = (params['height'] && params['height'].to_i <= 500) ? params['height'] : 388 # embed height
size_tags = ["width=\"#{video_width}\"", "height=\"#{video_height}\""]
og = get_opengraph.data og = get_opengraph.data
thumbnail_url = og[:image] || "https://img.youtube.com/vi/#{video_id}/hqdefault.jpg" thumbnail_url = og[:image] || "https://img.youtube.com/vi/#{video_id}/hqdefault.jpg"
@ -35,11 +38,13 @@ class Onebox::Engine::YoutubeOnebox
<div class="onebox lazyYT lazyYT-container" <div class="onebox lazyYT lazyYT-container"
data-youtube-id="#{video_id}" data-youtube-id="#{video_id}"
data-youtube-title="#{escaped_title}" data-youtube-title="#{escaped_title}"
data-width="#{video_width}" #{size_restricted ? size_tags.map { |t| "data-#{t}" }.join(' ') : ""}
data-height="#{video_height}"
data-parameters="#{embed_params}"> data-parameters="#{embed_params}">
<a href="https://www.youtube.com/watch?v=#{video_id}" target="_blank"> <a href="https://www.youtube.com/watch?v=#{video_id}" target="_blank">
<img class="ytp-thumbnail-image" src="#{thumbnail_url}" width="#{video_width}" height="#{video_height}" title="#{escaped_title}"> <img class="ytp-thumbnail-image"
src="#{thumbnail_url}"
#{size_restricted ? size_tags.join(' ') : ""}
title="#{escaped_title}">
</a> </a>
</div> </div>
EOF EOF