Merge pull request #8 from noesya/Block/video

Block/video

assets/sass/_theme/_utils.sass

@@ -91,6 +91,24 @@
         top: 0
         z-index: $zindex-stretched-link
 
+@mixin aspect-ratio($width, $height, $selector: 'iframe')
+    #{$selector}
+        aspect-ratio: #{$width}/#{$height}
+        display: block
+        width: 100%
+    @supports not (aspect-ratio: 1)
+        position: relative
+        &::before
+            content: ''
+            padding-top: ($height / $width) * 100%
+            width: 100%
+        #{$selector}
+            bottom: 0
+            left: 0
+            position: absolute
+            right: 0
+            top: 0
+
 @mixin button-reset
     appearance: none
     background: transparent

assets/sass/_theme/blocks/video.sass

-// .block-video
-//     iframe
-//         aspect-ratio: 16/9
-//         display: block
-//         width: 100%
+/* TODO : https://developer.mozilla.org/fr/docs/Web/HTML/Element/details */
 
-//     @supports not (aspect-ratio: 16/9)
-//         .video
-//             position: relative
-//             &::before
-//                 content: ''
-//                 display: block
-//                 padding-top: 56.25%
-//             iframe
-//                 bottom: 0
-//                 height: 100%
-//                 left: 0
-//                 position: absolute
-//                 top: 0
-//                 width: 100%
+.block-video
+    .video
+        @include aspect-ratio(16, 9, 'iframe')
+    .transcription
+        margin-top: $spacing1
 
-//     @include media-breakpoint-down(md)
-//         .container
-//             padding-left: 0
-//             padding-right: 0
-//         .transcription
-//             padding-left: $grid-gutter-width
-//             padding-right: $grid-gutter-width
-
-//     @include media-breakpoint-up(md)
-//         @include in-page-without-aside
-//             .block-content
-//                 @include make-row()
-//                 > *
-//                     @include make-col-ready()
-//                     @include make-col(8)
-//                     @include make-col-offset(2)
+    @include media-breakpoint-up(md)
+        @include in-page-without-aside
+            .block-content
+                margin-left: col(2)
+                width: col(8)

assets/sass/_theme/design-system/a11y.sass

@@ -17,4 +17,4 @@
         @include button-reset
         &::after
             font-size: px2rem(5)
-            line-height: px2rem(22)
\ No newline at end of file
+            line-height: px2rem(22)

assets/sass/_theme/design-system/transcription.sass

+.transcription
+    margin-top: $spacing1