Making video iframe more responsive

website/layouts/index.html

@@ -108,7 +108,7 @@
     <div class="about-section" style="margin: 10vh auto;">
         <div id="tools" class="about-text">
             <h1 class="medium-heading" style="color: #469198">Camp Communication Infrastructure</h1>
-            <div>
+            <div style="width: 100%; min-height: 100vh;">
                 <ul>
                     <li><a href="https://bigbluebutton.org/" target="_blank">Big Blue Button</a> (browser based free software video conferencing platform) for presentations, sessions, and other interactions.</li>
                     <li><a href="https://matrix.org" target="_blank">Matrix</a> rooms for instant messaging.</li>
@@ -120,7 +120,7 @@
                     <li>Each project will have their own project communication platforms.</li>
                 </ul>
                 <p>These tools will be introduced during the course of the camp.</p>
-                <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://videos.fsci.in/videos/embed/76f79bb3-b5ca-4929-8ceb-74bb18783803" frameborder="0" allowfullscreen style="padding:10px"></iframe>
+                <iframe width="100%" height="350" sandbox="allow-same-origin allow-scripts allow-popups" src="https://videos.fsci.in/videos/embed/76f79bb3-b5ca-4929-8ceb-74bb18783803" frameborder="0" allowfullscreen style="padding:10px"></iframe>
             </div>
         </div>
     </div>