Merge pull request #3 from narenakash/narenakash-patch-3

Responsiveness for videos on iframe created
narenakash · Mar 31, 2019 · ed0c8e5 · ed0c8e5
2 parents 823b6c4 + f560319
commit ed0c8e5
Showing 1 changed file with 19 additions and 0 deletions.
diff --git a/src/lab/exp4/Theory.html b/src/lab/exp4/Theory.html
@@ -25,6 +25,21 @@
     <link href="../../../css/style.css" rel="stylesheet">
 	<script type="text/javascript" src = 'tabs.js'></script>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-67558473-1', 'auto');ga('send', 'pageview');</script>	
+<style>
+	.videoWrapper {
+	position: relative;
+	padding-bottom: 56.25%; /* 16:9 */
+	padding-top: 25px;
+	height: 0;
+}
+.videoWrapper iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+</style>
 </head>
 <body id="page-top" class="index">
 <div id="top">
@@ -100,7 +115,9 @@ <h2 class="text-h2-lightblue" style=" margin-bottom: 20px; margin-top: 10px; "><
 							<!--edit -->
 <h1 class="text-h2-lightblue">Observations of Vertical and Horizontal angles using Total Station</h1><div class="content" id="experiment-article-section-1-content">
 <h2>Explanation in Class Room through Video Coverage </h2>
+<div class="videoWrapper">							
 <p><iframe allowfullscreen frameborder="0" height="390" src="https://www.youtube.com/embed/4NVCbdQPdTQ" width="640"></iframe></p>
+</div>
 <h2> </h2>
 <h2>Principle</h2>
 <p>It is based on the measurement of time for the distance travelled by wave<br>
@@ -114,7 +131,9 @@ <h2>Principle</h2>
 <p>  </p>
 <h2> </h2>
 <h2>Methodology</h2>
+<div class="videoWrapper">
 <iframe allowfullscreen frameborder="0" height="390" src="https://www.youtube.com/embed/edfkXHrxfDw" width="640"></iframe>
+</div>
 <p><br clear="all">
 </br></p>
 </div>						</div>