diff --git a/Components/BlockVideoOembed/Partials/_figure.twig b/Components/BlockVideoOembed/Partials/_figure.twig index 29ccb945d..47a96f37d 100644 --- a/Components/BlockVideoOembed/Partials/_figure.twig +++ b/Components/BlockVideoOembed/Partials/_figure.twig @@ -3,9 +3,13 @@ src="{{ image.src|resizeDynamic(1280, 720) }}" srcset="{{ placeholderImage(1280, 720) }}" data-srcset=" + {{ image.src|resizeDynamic(2048, 1152) }} 2048w, {{ image.src|resizeDynamic(1920, 1080) }} 1920w, - {{ image.src|resizeDynamic(1280, 720) }} 1280w, - {{ image.src|resizeDynamic(750, 422) }} 750w" + {{ image.src|resizeDynamic(1440, 810) }} 1440w, + {{ image.src|resizeDynamic(1320, 743) }} 1320w, + {{ image.src|resizeDynamic(800, 450) }} 800w, + {{ image.src|resizeDynamic(600, 338) }} 600w, + {{ image.src|resizeDynamic(375, 211) }} 375w" data-sizes="auto" alt="{{ image.alt|e }}"> {% if image.caption %} diff --git a/Components/BlockVideoOembed/Partials/_video.scss b/Components/BlockVideoOembed/Partials/_video.scss index 2e0d234a6..2b19db926 100644 --- a/Components/BlockVideoOembed/Partials/_video.scss +++ b/Components/BlockVideoOembed/Partials/_video.scss @@ -3,6 +3,7 @@ @import 'videoLoader'; .video { + margin: 0 auto; position: relative; &-player { diff --git a/Components/BlockVideoOembed/Partials/_videoPlayButton.scss b/Components/BlockVideoOembed/Partials/_videoPlayButton.scss index 7c5f955bb..03bf7d21c 100644 --- a/Components/BlockVideoOembed/Partials/_videoPlayButton.scss +++ b/Components/BlockVideoOembed/Partials/_videoPlayButton.scss @@ -73,7 +73,6 @@ $play-button-triangle-size: ( .video-playButton { @include play-button($color-gray, $background-opacity, $border-width, $color-white, $play-button-circle-diameter, $color-white, $play-button-triangle-size); - cursor: pointer; display: block; height: 100%; @@ -84,3 +83,27 @@ $play-button-triangle-size: ( width: 100%; z-index: 2; } + +&.flyntComponent--sizeSmall { + $play-button-small-circle-diameter: ( + 'desktop': 60px, + 'mobile': 40px + ); + + $play-button-small-triangle-size: ( + 'desktop': 20px, + 'mobile': 10px + ); + + .video-playButton { + @include play-button( + $color-gray, + $background-opacity, + $border-width, + $color-white, + $play-button-small-circle-diameter, + $color-white, + $play-button-small-triangle-size + ); + } +} diff --git a/Components/BlockVideoOembed/README.md b/Components/BlockVideoOembed/README.md index 2b232ae31..c439df5a4 100644 --- a/Components/BlockVideoOembed/README.md +++ b/Components/BlockVideoOembed/README.md @@ -1,3 +1,3 @@ # Block Video oEmbed -Instead of embedding a video player directly, this component shows a poster image with an overlaying play button at first only. When clicked, the iframe based embed player is loaded autoplays the video, if the browser supports autoplay. +Instead of embedding a video player directly, this component shows a poster image with an overlaying play button at first only. When clicked, the iframe based embed player is loaded autoplays the video, if the browser supports autoplay. Multiple size options available. diff --git a/Components/BlockVideoOembed/_style.scss b/Components/BlockVideoOembed/_style.scss index ec1bfaf5f..e80379947 100644 --- a/Components/BlockVideoOembed/_style.scss +++ b/Components/BlockVideoOembed/_style.scss @@ -1,3 +1,27 @@ [is='flynt-block-video-oembed'] { @import 'Partials/video'; + + &.flyntComponent--sizeSmall { + .video { + max-width: 375px; + } + } + + &.flyntComponent--sizeMedium { + .video { + max-width: $content-max-width; + } + } + + &.flyntComponent--sizeLarge { + .video { + max-width: 800px; + } + } + + &.flyntComponent--sizeFull { + .figure-caption { + margin-left: 0.625rem; + } + } } diff --git a/Components/BlockVideoOembed/functions.php b/Components/BlockVideoOembed/functions.php index aa3e613fb..65d3385e9 100644 --- a/Components/BlockVideoOembed/functions.php +++ b/Components/BlockVideoOembed/functions.php @@ -35,7 +35,7 @@ function getACFLayout() 'type' => 'image', 'preview_size' => 'medium', 'mime_types' => 'jpg,jpeg,png', - 'instructions' => __('Recommended Size: Min-Width 1200px; Min-Height: 675px; Image-Format: JPG, PNG. Aspect Ratio 16/9.', 'flynt'), + 'instructions' => __('Recommended Size: Min-Width 1920px; Min-Height: 1080px; Image-Format: JPG, PNG. Aspect Ratio 16/9.', 'flynt'), 'required' => 1 ], [ @@ -57,7 +57,23 @@ function getACFLayout() 'type' => 'group', 'layout' => 'row', 'sub_fields' => [ - FieldVariables\getTheme() + FieldVariables\getTheme(), + [ + 'label' => __('Size', 'flynt'), + 'name' => 'size', + 'type' => 'radio', + 'other_choice' => 0, + 'save_other_choice' => 0, + 'layout' => 'horizontal', + 'choices' => [ + 'sizeSmall' => __('Small', 'flynt'), + 'sizeMedium' => __('Medium', 'flynt'), + 'sizeLarge' => __('Large (Default)', 'flynt'), + 'sizeHuge' => __('Huge', 'flynt'), + 'sizeFull' => __('Full', 'flynt'), + ], + 'default_value' => 'sizeLarge', + ], ] ] ] diff --git a/Components/BlockVideoOembed/index.twig b/Components/BlockVideoOembed/index.twig index 1b3417850..39def6283 100644 --- a/Components/BlockVideoOembed/index.twig +++ b/Components/BlockVideoOembed/index.twig @@ -1,5 +1,5 @@ -