youtube_embed: use embed-responsive

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\"
+			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>";
+					allowfullscreen frameborder='0'></iframe>
+				</div>";
 
 		}
 	}

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;

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;

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;

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;

themes/light/cdm.less

@@ -115,12 +115,14 @@
 		font-size : 16px;
 	}
 
-	.intermediate iframe,
-	.content-inner iframe {
+	.intermediate,
+	.content-inner {
+		iframe {
 			max-width : 98%;
 			width : auto;
 			height : auto;
 		}
+	}
 
 	.intermediate img,
 	.intermediate video,
@@ -208,7 +210,9 @@
 		}
 	}
 
-	.content-inner .embed-responsive {
+	.intermediate,
+	.content-inner {
+		.embed-responsive {
 			overflow : hidden;
 			padding-bottom : @embed-responsive-padding;
 			position : relative;
@@ -223,6 +227,7 @@
 				width : 100%;
 			}
 		}
+	}
 
 	&.expandable {
 		background-color : @color-panel-bg;

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;

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;