adding embedded video to resources page

web/app/models.py

@@ -30,6 +30,7 @@ class Resource(db.Model):
     type = db.Column(db.Text)
     name = db.Column(db.Text)
     description = db.Column(db.Text)
+    videoUrl = db.Column(db.Text)
     # tools
     developer = db.Column(db.Text)
     developerUrl = db.Column(db.Text)

web/app/static/styles/main.css

@@ -1751,4 +1751,18 @@ select.form-select {
   color: #fff;
   background-color: #d9534f;
   border-color: #d43f3a;
+}
+
+#embedded-video {
+  margin-top: 1rem;
+}
+
+div#embedded-video iframe {
+  position: relative;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 480px;
+  width: 100%;
 }

web/app/templates/book.html

@@ -128,6 +128,12 @@
                     </div>
                     {% endif %}
                 </div>
+                {% if resource['videoUrl'] %}
+                <div id="embedded-video" class="lg:col-span-12">
+                    <h3>Accompanying video</h3>
+                    <iframe src="{{ resource['videoUrl']|safe }}" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
+                </div>
+                {% endif %}
             </div>
         </div>
     </div>

web/app/templates/resource.html

@@ -117,6 +117,12 @@
                 </div>
                 {% endif %}
             </div>
+            {% if resource['videoUrl'] %}
+            <div id="embedded-video" class="lg:col-span-12">
+                <h3>Accompanying video</h3>
+                <iframe src="{{ resource['videoUrl']|safe }}" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
+            </div>
+            {% endif %}
 
         </div>
     </div>