Noissue - Abstracted embedded video for use in blog

static/css/video.css

Index: static/css/video.css
===================================================================
new file mode 100644
--- /dev/null
+++ b/static/css/video.css
@@ -0,0 +1,83 @@
+.video-parent
+{
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 1px solid #c9c9c9;
+  box-shadow: 1px 1px 0 0 #dbdbdb;
+  overflow: hidden;
+}
+
+.video-parent.contains-iframe::before
+{
+  display: block;
+  content: "";
+  padding-top: 56.25%;

[juliandoucette, 2018/02/20 22:28:11]

Detail: I stole this trick from bootstrap. This percentage is proportional to
the aspect ratio of the video (16x9) in such a way that it guarantees that the
padding added will be equal to the height of the video in order to expand the
container while the iframe within is absolute and 100%. There is no other way to
make an iframe responsive that I know about (without JavaScript).

+}
+
+.video-parent iframe
+{
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.video-link
+{
+  display: block;
+  position: relative;
+}
+
+.video-thumbnail
+{
+  width: 100%;
+  transition: opacity 0.8s;
+}
+
+.no-js .video-thumbnail,
+.contains-disclaimer .video-thumbnail
+{
+  opacity: 0.2;
+}
+
+.video-disclaimer
+{
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin: 20px;
+  background-color: #fff;
+  font-size: 0.9em;
+  text-align: center;
+  transition: opacity 0.8s;
+}
+
+.no-js .video-disclaimer,
+.contains-disclaimer .video-disclaimer
+{
+  visibility: visible;
+  opacity: 1;
+}
+
+.video-play
+{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80px;
+  margin-top: -40px;
+  margin-left: -40px;
+}
+
+.no-js .video-play,
+.contains-disclaimer .video-play
+{
+  margin-top: -60px;
+}