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'
src=\"https://www.youtube.com/embed/$vid_id\" type='text/html' width='640' height='385'
allowfullscreen frameborder=\"0\"></iframe>"; src=\"https://www.youtube.com/embed/$vid_id\"
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,11 +115,13 @@
font-size : 16px; font-size : 16px;
} }
.intermediate iframe, .intermediate,
.content-inner iframe { .content-inner {
max-width : 98%; iframe {
width : auto; max-width : 98%;
height : auto; width : auto;
height : auto;
}
} }
.intermediate img, .intermediate img,
@ -208,19 +210,22 @@
} }
} }
.content-inner .embed-responsive { .intermediate,
overflow : hidden; .content-inner {
padding-bottom : @embed-responsive-padding; .embed-responsive {
position : relative; overflow : hidden;
padding-bottom : @embed-responsive-padding;
position : relative;
iframe { iframe {
border : 0; border : 0;
bottom : 0; bottom : 0;
height : 100%; height : 100%;
left : 0; left : 0;
position : absolute; position : absolute;
top : 0; top : 0;
width : 100%; width : 100%;
}
} }
} }

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;