Make iframes size responsively.
This commit is contained in:
parent
a1ffc11619
commit
7a0ea9d90e
|
@ -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) {
|
||||
|
||||
|
|
|
@ -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
|
@ -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
|
@ -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
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
@ -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
Loading…
Reference in New Issue