youtube_embed: use embed-responsive

This commit is contained in:
Andrew Dolgov 2021-04-21 18:47:49 +03:00
parent 0f61675cd0
commit 5a71426ea5
8 changed files with 40 additions and 21 deletions

View File

@ -29,10 +29,12 @@ class Af_Youtube_Embed extends Plugin {
$vid_id = $matches[1]; $vid_id = $matches[1];
return "<iframe class=\"youtube-player\" return "<div class='embed-responsive'>
type=\"text/html\" width=\"640\" height=\"385\" <iframe class='youtube-player'
type='text/html' width='640' height='385'
src=\"https://www.youtube.com/embed/$vid_id\" src=\"https://www.youtube.com/embed/$vid_id\"
allowfullscreen frameborder=\"0\"></iframe>"; allowfullscreen frameborder='0'></iframe>
</div>";
} }
} }

View File

@ -1385,11 +1385,13 @@ body.ttrss_utility hr {
.cdm .feed-title a:hover { .cdm .feed-title a:hover {
color: #257aa7; color: #257aa7;
} }
.cdm .intermediate .embed-responsive,
.cdm .content-inner .embed-responsive { .cdm .content-inner .embed-responsive {
overflow: hidden; overflow: hidden;
padding-bottom: 56.25%; padding-bottom: 56.25%;
position: relative; position: relative;
} }
.cdm .intermediate .embed-responsive iframe,
.cdm .content-inner .embed-responsive iframe { .cdm .content-inner .embed-responsive iframe {
border: 0; border: 0;
bottom: 0; bottom: 0;

View File

@ -1385,11 +1385,13 @@ body.ttrss_utility hr {
.cdm .feed-title a:hover { .cdm .feed-title a:hover {
color: #b87d2c; color: #b87d2c;
} }
.cdm .intermediate .embed-responsive,
.cdm .content-inner .embed-responsive { .cdm .content-inner .embed-responsive {
overflow: hidden; overflow: hidden;
padding-bottom: 56.25%; padding-bottom: 56.25%;
position: relative; position: relative;
} }
.cdm .intermediate .embed-responsive iframe,
.cdm .content-inner .embed-responsive iframe { .cdm .content-inner .embed-responsive iframe {
border: 0; border: 0;
bottom: 0; bottom: 0;

View File

@ -1385,11 +1385,13 @@ body.ttrss_utility hr {
.cdm .feed-title a:hover { .cdm .feed-title a:hover {
color: #257aa7; color: #257aa7;
} }
.cdm .intermediate .embed-responsive,
.cdm .content-inner .embed-responsive { .cdm .content-inner .embed-responsive {
overflow: hidden; overflow: hidden;
padding-bottom: 56.25%; padding-bottom: 56.25%;
position: relative; position: relative;
} }
.cdm .intermediate .embed-responsive iframe,
.cdm .content-inner .embed-responsive iframe { .cdm .content-inner .embed-responsive iframe {
border: 0; border: 0;
bottom: 0; bottom: 0;

View File

@ -1385,11 +1385,13 @@ body.ttrss_utility hr {
.cdm .feed-title a:hover { .cdm .feed-title a:hover {
color: #257aa7; color: #257aa7;
} }
.cdm .intermediate .embed-responsive,
.cdm .content-inner .embed-responsive { .cdm .content-inner .embed-responsive {
overflow: hidden; overflow: hidden;
padding-bottom: 56.25%; padding-bottom: 56.25%;
position: relative; position: relative;
} }
.cdm .intermediate .embed-responsive iframe,
.cdm .content-inner .embed-responsive iframe { .cdm .content-inner .embed-responsive iframe {
border: 0; border: 0;
bottom: 0; bottom: 0;

View File

@ -115,12 +115,14 @@
font-size : 16px; font-size : 16px;
} }
.intermediate iframe, .intermediate,
.content-inner iframe { .content-inner {
iframe {
max-width : 98%; max-width : 98%;
width : auto; width : auto;
height : auto; height : auto;
} }
}
.intermediate img, .intermediate img,
.intermediate video, .intermediate video,
@ -208,7 +210,9 @@
} }
} }
.content-inner .embed-responsive { .intermediate,
.content-inner {
.embed-responsive {
overflow : hidden; overflow : hidden;
padding-bottom : @embed-responsive-padding; padding-bottom : @embed-responsive-padding;
position : relative; position : relative;
@ -223,6 +227,7 @@
width : 100%; width : 100%;
} }
} }
}
&.expandable { &.expandable {
background-color : @color-panel-bg; background-color : @color-panel-bg;

View File

@ -1386,11 +1386,13 @@ body.ttrss_utility hr {
.cdm .feed-title a:hover { .cdm .feed-title a:hover {
color: #b87d2c; color: #b87d2c;
} }
.cdm .intermediate .embed-responsive,
.cdm .content-inner .embed-responsive { .cdm .content-inner .embed-responsive {
overflow: hidden; overflow: hidden;
padding-bottom: 56.25%; padding-bottom: 56.25%;
position: relative; position: relative;
} }
.cdm .intermediate .embed-responsive iframe,
.cdm .content-inner .embed-responsive iframe { .cdm .content-inner .embed-responsive iframe {
border: 0; border: 0;
bottom: 0; bottom: 0;

View File

@ -1386,11 +1386,13 @@ body.ttrss_utility hr {
.cdm .feed-title a:hover { .cdm .feed-title a:hover {
color: #257aa7; color: #257aa7;
} }
.cdm .intermediate .embed-responsive,
.cdm .content-inner .embed-responsive { .cdm .content-inner .embed-responsive {
overflow: hidden; overflow: hidden;
padding-bottom: 56.25%; padding-bottom: 56.25%;
position: relative; position: relative;
} }
.cdm .intermediate .embed-responsive iframe,
.cdm .content-inner .embed-responsive iframe { .cdm .content-inner .embed-responsive iframe {
border: 0; border: 0;
bottom: 0; bottom: 0;