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];
return "<iframe class=\"youtube-player\"
type=\"text/html\" width=\"640\" height=\"385\"
src=\"https://www.youtube.com/embed/$vid_id\"
allowfullscreen frameborder=\"0\"></iframe>";
return "<div class='embed-responsive'>
<iframe class='youtube-player'
type='text/html' width='640' height='385'
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 {
color: #257aa7;
}
.cdm .intermediate .embed-responsive,
.cdm .content-inner .embed-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.cdm .intermediate .embed-responsive iframe,
.cdm .content-inner .embed-responsive iframe {
border: 0;
bottom: 0;

View File

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

View File

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

View File

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

View File

@ -115,11 +115,13 @@
font-size : 16px;
}
.intermediate iframe,
.content-inner iframe {
max-width : 98%;
width : auto;
height : auto;
.intermediate,
.content-inner {
iframe {
max-width : 98%;
width : auto;
height : auto;
}
}
.intermediate img,
@ -208,19 +210,22 @@
}
}
.content-inner .embed-responsive {
overflow : hidden;
padding-bottom : @embed-responsive-padding;
position : relative;
.intermediate,
.content-inner {
.embed-responsive {
overflow : hidden;
padding-bottom : @embed-responsive-padding;
position : relative;
iframe {
border : 0;
bottom : 0;
height : 100%;
left : 0;
position : absolute;
top : 0;
width : 100%;
iframe {
border : 0;
bottom : 0;
height : 100%;
left : 0;
position : absolute;
top : 0;
width : 100%;
}
}
}

View File

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

View File

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