youtube_embed: use embed-responsive

8 files changed, 41 insertions, 22 deletions

diff --git a/plugins/af_youtube_embed/init.php b/plugins/af_youtube_embed/init.php
index b53a92f0e..95ab0b9d5 100644
--- a/plugins/af_youtube_embed/init.php
+++ b/plugins/af_youtube_embed/init.php
@@ -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>";
 
 		}
 	}
diff --git a/themes/compact.css b/themes/compact.css
index f6adece87..3dbc204ab 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -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;
diff --git a/themes/compact_night.css b/themes/compact_night.css
index 2436dd911..34417a92c 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -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;
diff --git a/themes/light-high-contrast.css b/themes/light-high-contrast.css
index 16ac51035..6e799bc9c 100644
--- a/themes/light-high-contrast.css
+++ b/themes/light-high-contrast.css
@@ -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;
diff --git a/themes/light.css b/themes/light.css
index d26e5f81b..78a8b24b6 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -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;
diff --git a/themes/light/cdm.less b/themes/light/cdm.less
index 41d789a09..a89ceed27 100644
--- a/themes/light/cdm.less
+++ b/themes/light/cdm.less
@@ -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;
-
-		iframe {
-			border : 0;
-			bottom : 0;
-			height : 100%;
-			left : 0;
-			position : absolute;
-			top : 0;
-			width : 100%;
+	.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%;
+			}
 		}
 	}
 
diff --git a/themes/night.css b/themes/night.css
index f5e23e59a..d401c50c2 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -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;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index 60293f52c..b0686a067 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -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;