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\"
+			return "<div class='embed-responsive'>
-				type=\"text/html\" width=\"640\" height=\"385\"
+				<iframe class='youtube-player'
-				src=\"https://www.youtube.com/embed/$vid_id\"
+					type='text/html' width='640' height='385'
-				allowfullscreen frameborder=\"0\"></iframe>";
+					src=\"https://www.youtube.com/embed/$vid_id\"
+					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,11 +115,13 @@
 		font-size : 16px;
 	}
 
-	.intermediate iframe,
+	.intermediate,
-	.content-inner iframe {
+	.content-inner {
-		max-width : 98%;
+		iframe {
-		width : auto;
+			max-width : 98%;
-		height : auto;
+			width : auto;
+			height : auto;
+		}
 	}
 
 	.intermediate img,
@@ -208,19 +210,22 @@
 		}
 	}
 
-	.content-inner .embed-responsive {
+	.intermediate,
-		overflow : hidden;
+	.content-inner {
-		padding-bottom : @embed-responsive-padding;
+		.embed-responsive {
-		position : relative;
+			overflow : hidden;
-
+			padding-bottom : @embed-responsive-padding;
-		iframe {
+			position : relative;
-			border : 0;
+
-			bottom : 0;
+			iframe {
-			height : 100%;
+				border : 0;
-			left : 0;
+				bottom : 0;
-			position : absolute;
+				height : 100%;
-			top : 0;
+				left : 0;
-			width : 100%;
+				position : absolute;
+				top : 0;
+				width : 100%;
+			}
 		}
 	}
 

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;