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"
/>