From 04b55e6baaac1dabf082620ca5089483ca336d48 Mon Sep 17 00:00:00 2001 From: Mohammad Akhlaghi Date: Wed, 30 Jun 2021 23:26:42 +0100 Subject: Added CSS, allowing iframe aspect ratio to be preserved Until now, a fixed height of 315 was assumed for the 'iframe'. So on a full screen monitor the video would be too thin and on a smarphone it would be too thick. With this commit, I found a good CSS style that conforms to CSS2 for older browsers also and used it to have varying aspect ratios based on the size of the browser. Also, now that people can directly watch the video on Maneage's own webpage, it was necessary to edit the text above the video. --- css/base.css | 29 +++++++++++++++++++++++++++++ index.html | 8 ++++++-- 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/css/base.css b/css/base.css index 9928c8c..9acdaed 100644 --- a/css/base.css +++ b/css/base.css @@ -416,3 +416,32 @@ section { text-align: center; } } + +/* ================================================================== + * Embeded videos using iframe with fixed aspect ratio + * ================================================================== */ + +/* This solution for preserving the 'iframe' aspect ratio was taken + from here: + https://stackoverflow.com/questions/25302836/responsive-video-iframes-keeping-aspect-ratio-with-only-css#35153397 + */ + +/* This element defines the size the iframe will take. In this + example we want to have a ratio of 25:14 */ +.aspect-ratio { + position: relative; + width: 100%; + height: 0; + /* The height of the item will now be 56.25% of the width. */ + padding-bottom: 56.25%; +} + +/* Adjust the iframe so it's rendered in the outer-width and + outer-height of it's parent */ +.aspect-ratio iframe { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; +} diff --git a/index.html b/index.html index 08f1557..7541804 100644 --- a/index.html +++ b/index.html @@ -83,8 +83,12 @@

Short video introduction to Maneage:

-

By clicking on the image below, you will be taken to a PeerTube instance to see an invited talk at RDA Adoption week 2020 to introduce Maneage (20 minutes); the slides are also available. For a more detailed talk (80 minutes), see this invited lecture at CiTIUS.

- +

In the box below, you can watch a video of an invited talk at RDA Adoption week 2020 to introduce Maneage (17 minutes, hosted on PeerTube). + For a more detailed talk (80 minutes), see this invited lecture at CiTIUS (link opens in PeerTube). + The slides are also available as PDF.

+
+ +
-- cgit v1.2.1