Trying to integrate video

VIPSWeb/static/css/vipsweb.css

@@ -839,3 +839,21 @@ div.advertisement {
 	border: 3px solid #008136;
 	padding: 10px 20px 25px 25px;
 }
+
+/* For embedding VIMEO etc responsively */
+.responsive-video {
+position: relative;
+padding-bottom: 56.25%;
+padding-top: 60px; overflow: hidden;
+}
+
+
+.responsive-video iframe,
+.responsive-video object,
+.responsive-video embed {
+position: absolute;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+}

roughage/templates/roughage/nutrition.html

@@ -34,9 +34,11 @@
 <p>
 	Felt merket med * må fylles ut. Velg klimastasjon for årets klimadata, normaldata eller begge.
 </p>
+
 <form id="{{form_id}}">
 	<div class="row">
 		<div class="col-md-6">
+		
 			<input type="hidden" name="timeZone" value="Europe/Oslo"/>
 			<div class="form-group">
 				<label for="weatherStationId">Målestasjon for årets værdata</label>
@@ -89,7 +91,11 @@
 			
 		</div>
 		<div class="col-md-6">
-			<div id="weatherStationSelectionMap" style="height: 450px;max-height: 450px;">
+		<div class="responsive-video">
+			<iframe src="https://player.vimeo.com/video/147571372" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+			<p><a href="https://vimeo.com/147571372">Grovformodellen 2015</a> from <a href="https://vimeo.com/nibio">NIBIO</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
+		</div>
+			<div id="weatherStationSelectionMap" style="height: 450px;max-height: 450px; margin: 15px;">
 				<div id="popover"></div>
 			</div>
 		</div>