make videos responsive

lemonshushu · Apr 6, 2021 · 6f42515 · 6f42515
1 parent 410a947
commit 6f42515
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/features/posts/SinglePostPage.js b/src/features/posts/SinglePostPage.js
@@ -27,6 +27,8 @@ export const SinglePostPage = ({ match }) => {
     );
   }
 
+  const content = post.content.replace('<iframe', '<section><iframe').replace('</iframe>', '</iframe></section>');
+
   return (
     <section>
       <div className="d-xs-block d-md-none" style={{ height: 50 }} />
@@ -39,7 +41,7 @@ export const SinglePostPage = ({ match }) => {
             </div>
           </Card.Header>
           <Card.Body>
-            <div dangerouslySetInnerHTML={{ __html: post.content }} className={style.postContent}></div>
+            <div dangerouslySetInnerHTML={{ __html: content }} className={style.postContent}></div>
           </Card.Body>
         </Card>
       </article>

diff --git a/src/features/posts/SinglePostPage.module.css b/src/features/posts/SinglePostPage.module.css
@@ -1,5 +1,21 @@
-.postContent img {
+.postContent img{
   max-width: 100%;
   height: auto;
   padding-right: 1em;
+}
+
+.postContent section {
+  position: relative;
+  padding-bottom: 56.25%;
+  padding-top: 30px;
+  height: 0;
+  overflow: hidden;
+}
+
+.postContent section iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100% !important;
+  height: 100% !important;
 }