diff options
| -rw-r--r-- | css/base.css | 29 | ||||
| -rw-r--r-- | 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; +} @@ -83,8 +83,12 @@ <img class="center" src="img/project-flow.svg" width="85%" /> <h3>Short video introduction to Maneage:</h3> - <p class="clean">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 <a href="pdf/slides-intro.pdf">slides</a> are also available. For a more detailed talk (80 minutes), see this <a href="https://peertube.stream/videos/watch/e7fdf27b-61b8-40cd-8306-482d79e4d6c5">invited lecture at CiTIUS</a>.</p> - <iframe width="85%" height="315" class="center" sandbox="allow-same-origin allow-scripts allow-popups" title="maneage-into-rda-2020-06-18" src="https://peertube.stream/videos/embed/f8b1b565-0e8d-4279-b7c5-f20e51e1d8da" frameborder="0" allowfullscreen></iframe> + <p class="clean">In the box below, you can watch a video of an invited talk at RDA Adoption week 2020 to introduce Maneage (17 minutes, hosted <a href="https://peertube.stream/videos/watch/f8b1b565-0e8d-4279-b7c5-f20e51e1d8da">on PeerTube</a>). + For a more detailed talk (80 minutes), see this <a href="https://peertube.stream/videos/watch/e7fdf27b-61b8-40cd-8306-482d79e4d6c5">invited lecture at CiTIUS</a> (link opens in PeerTube). + The slides are also <a href="pdf/slides-intro.pdf">available as PDF</a>.</p> + <div class="aspect-ratio"> + <iframe class="center" sandbox="allow-same-origin allow-scripts allow-popups" title="maneage-into-rda-2020-06-18" src="https://peertube.stream/videos/embed/f8b1b565-0e8d-4279-b7c5-f20e51e1d8da" frameborder="0" allowfullscreen></iframe> + </div> </section> <section> |