Make iframes size responsively.

This commit is contained in:
JustAMacUser 2020-05-15 22:25:56 -04:00
parent a1ffc11619
commit 7a0ea9d90e
14 changed files with 187 additions and 5 deletions

View File

@ -1373,6 +1373,14 @@
$doc->removeChild($doc->firstChild); //remove doctype
$doc = strip_harmful_tags($doc, $allowed_elements, $disallowed_attributes);
$entries = $xpath->query('//iframe');
foreach ($entries as $entry) {
$div = $doc->createElement('div');
$div->setAttribute('class', 'embed-responsive');
$entry->parentNode->replaceChild($div, $entry);
$div->appendChild($entry);
}
if ($highlight_words && is_array($highlight_words)) {
foreach ($highlight_words as $word) {

View File

@ -70,6 +70,20 @@ body.ttrss_main div.post div.content video {
max-width: 98%;
height: auto;
}
body.ttrss_main div.post div.content div.embed-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
body.ttrss_main div.post div.content div.embed-responsive iframe {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
body.ttrss_main .inline-player {
display: flex;
align-items: center;
@ -1289,6 +1303,20 @@ div.cdm.vgrlf .feed {
font-style: italic;
font-size: 11px;
}
.cdm div.content-inner div.embed-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.cdm div.content-inner div.embed-responsive iframe {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.cdm div.header span.author {
white-space: nowrap;
color: #555;

File diff suppressed because one or more lines are too long

View File

@ -70,6 +70,20 @@ body.ttrss_main div.post div.content video {
max-width: 98%;
height: auto;
}
body.ttrss_main div.post div.content div.embed-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
body.ttrss_main div.post div.content div.embed-responsive iframe {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
body.ttrss_main .inline-player {
display: flex;
align-items: center;
@ -1289,6 +1303,20 @@ div.cdm.vgrlf .feed {
font-style: italic;
font-size: 11px;
}
.cdm div.content-inner div.embed-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.cdm div.content-inner div.embed-responsive iframe {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.cdm div.header span.author {
white-space: nowrap;
color: #ccc;

File diff suppressed because one or more lines are too long

View File

@ -70,6 +70,20 @@ body.ttrss_main div.post div.content video {
max-width: 98%;
height: auto;
}
body.ttrss_main div.post div.content div.embed-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
body.ttrss_main div.post div.content div.embed-responsive iframe {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
body.ttrss_main .inline-player {
display: flex;
align-items: center;
@ -1289,6 +1303,20 @@ div.cdm.vgrlf .feed {
font-style: italic;
font-size: 11px;
}
.cdm div.content-inner div.embed-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.cdm div.content-inner div.embed-responsive iframe {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.cdm div.header span.author {
white-space: nowrap;
color: #555;

File diff suppressed because one or more lines are too long

View File

@ -203,6 +203,22 @@ div.cdm.vgrlf .feed {
font-size: 11px;
}
div.content-inner div.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%;
}
}
div.header span.author {
white-space : nowrap;
color : @default-text;

View File

@ -17,6 +17,8 @@
@color-tooltip-fg: @color-panel-bg;
@color-tooltip-bg: darken(@color-accent, 10%);
@embed-responsive-padding: 56.25%; // Use 56.25% for 16:9 aspect ratio, 75% for 4:3.
body.ttrss_main,
body.ttrss_prefs,
#main {

View File

@ -65,6 +65,22 @@ body.ttrss_main {
max-width : 98%;
height: auto;
}
div.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%;
}
}
}
}

View File

@ -71,6 +71,20 @@ body.ttrss_main div.post div.content video {
max-width: 98%;
height: auto;
}
body.ttrss_main div.post div.content div.embed-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
body.ttrss_main div.post div.content div.embed-responsive iframe {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
body.ttrss_main .inline-player {
display: flex;
align-items: center;
@ -1290,6 +1304,20 @@ div.cdm.vgrlf .feed {
font-style: italic;
font-size: 11px;
}
.cdm div.content-inner div.embed-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.cdm div.content-inner div.embed-responsive iframe {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.cdm div.header span.author {
white-space: nowrap;
color: #ccc;

File diff suppressed because one or more lines are too long

View File

@ -71,6 +71,20 @@ body.ttrss_main div.post div.content video {
max-width: 98%;
height: auto;
}
body.ttrss_main div.post div.content div.embed-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
body.ttrss_main div.post div.content div.embed-responsive iframe {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
body.ttrss_main .inline-player {
display: flex;
align-items: center;
@ -1290,6 +1304,20 @@ div.cdm.vgrlf .feed {
font-style: italic;
font-size: 11px;
}
.cdm div.content-inner div.embed-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.cdm div.content-inner div.embed-responsive iframe {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.cdm div.header span.author {
white-space: nowrap;
color: #ccc;

File diff suppressed because one or more lines are too long