diff --git a/src/components/blocks/TextTeaser.vue b/src/components/blocks/TextTeaser.vue index 87161c2..6fd7de1 100644 --- a/src/components/blocks/TextTeaser.vue +++ b/src/components/blocks/TextTeaser.vue @@ -7,6 +7,13 @@

+

-
- +
+
+ +
+
@@ -83,6 +97,10 @@ export default { type: Array, default: null, }, + video: { + type: Object, + default: null, + }, variation: { type: String, default: 'text-left', @@ -139,6 +157,10 @@ export default { } return null; }, + hasVideo() { + const { id } = this.video || {}; + return !!id; + }, hasFile() { const { file } = this; return file && file.id && file.text; @@ -151,6 +173,9 @@ export default { const title = (this.boxTitle || '').replace(/<\/?[^>]+(>|$)/g, ''); return slugify(title, { lower: true, strict: true }); }, + mergeVideo() { + return (this.hasVideo && this.$d.clientWidth <= 1241); + }, }, //--------------------------------------------------- // @@ -242,9 +267,39 @@ export default { max-width: 400px; height: auto; } + + &.video { + align-self: flex-start; + & > .video-wrapper { + position: relative; + margin-top: 25px; + width: 100%; + height: auto; + aspect-ratio: 16/9; + + & > .video-container { + padding: 0; + position: absolute; + top: 0; + left: 0; + width: 25vw; + min-width: 440px; + } + } + } } - @include breakpoint('sm') { + & > div:only-child { + display: block; + width: 100%; + margin: 0 auto; + + .video-container { + padding: 5px 0; + } + } + + @include breakpoint('m') { flex-direction: column; padding-top: 45px; // padding-bottom: 45px; @@ -336,9 +391,39 @@ export default { max-width: 400px; height: auto; } + + &.video { + align-self: flex-start; + & > .video-wrapper { + position: relative; + width: 100%; + height: auto; + aspect-ratio: 16/9; + + & > .video-container { + position: absolute; + padding: 0; + top: 0; + left: auto; + right: 0; + width: 25vw; + min-width: 440px; + } + } + } } - @include breakpoint('sm') { + & > div:only-child { + display: block; + width: 100%; + margin: 0 auto; + + .video-container { + padding: 5px 0; + } + } + + @include breakpoint('m') { flex-direction: column; padding-top: 45px; diff --git a/src/components/blocks/VideoPlayer.vue b/src/components/blocks/VideoPlayer.vue index c634467..8056b20 100644 --- a/src/components/blocks/VideoPlayer.vue +++ b/src/components/blocks/VideoPlayer.vue @@ -258,8 +258,9 @@ div[data-vimeo-initialized="true"] { display: block; left: 50%; top: 50%; - width: 120px; - height: 120px; + width: 15%; + height: auto; + max-width: 120px; z-index: 2000; cursor: pointer; backface-visibility: hidden; diff --git a/src/views/PageFactory.vue b/src/views/PageFactory.vue index 680bb3c..2c0a071 100644 --- a/src/views/PageFactory.vue +++ b/src/views/PageFactory.vue @@ -28,6 +28,7 @@ :text-color="block.txtcolor" :link-color="block.linkcolor" :media="block.media" + :video="block.video" :variation="block.variation" />