|
|
@@ -57,22 +57,17 @@
|
|
|
/>
|
|
|
</v-img>
|
|
|
|
|
|
- <video
|
|
|
+ <iframe
|
|
|
v-else
|
|
|
- controls
|
|
|
- autoPlay
|
|
|
class="screen"
|
|
|
+ :src="`https://www.youtube.com/embed/Gpl4gAWNc3s?autoplay=1&controls=1`"
|
|
|
+ title="Vidéo corporate Opentalent"
|
|
|
+ frameborder="0"
|
|
|
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
|
+ allowfullscreen
|
|
|
aria-label="Vidéo corporate Opentalent"
|
|
|
aria-description="Vidéo corporate Opentalent : découvrez l’histoire de l’entreprise, son agenda et ses logiciels culturels"
|
|
|
- >
|
|
|
- <source
|
|
|
- :src="
|
|
|
- runtimeConfig.public.fileStorageBaseUrl +
|
|
|
- '/Video_Corporate_Opentalent-Agenda_et_logiciels_culturels.mp4'
|
|
|
- "
|
|
|
- type="video/mp4"
|
|
|
- />
|
|
|
- </video>
|
|
|
+ ></iframe>
|
|
|
</v-col>
|
|
|
</v-row>
|
|
|
|
|
|
@@ -143,8 +138,6 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-const runtimeConfig = useRuntimeConfig()
|
|
|
-
|
|
|
const playVideo: Ref<boolean> = ref(false)
|
|
|
</script>
|
|
|
|
|
|
@@ -228,7 +221,6 @@ const playVideo: Ref<boolean> = ref(false)
|
|
|
position: relative;
|
|
|
width: 900px;
|
|
|
max-width: 900px;
|
|
|
- height: 675px;
|
|
|
object-fit: cover;
|
|
|
margin: 2rem auto;
|
|
|
text-align: center;
|
|
|
@@ -237,12 +229,32 @@ const playVideo: Ref<boolean> = ref(false)
|
|
|
bottom: 30rem;
|
|
|
}
|
|
|
|
|
|
+ @media (min-width: 980px) {
|
|
|
+ .screen {
|
|
|
+ height: 675px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 980px) {
|
|
|
+ .screen {
|
|
|
+ max-width: 90%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
video.screen {
|
|
|
object-fit: contain;
|
|
|
background: black;
|
|
|
transform: scale(1.1);
|
|
|
}
|
|
|
|
|
|
+ iframe.screen {
|
|
|
+ object-fit: contain;
|
|
|
+ background: black;
|
|
|
+ transform: scale(1.1);
|
|
|
+ border: none;
|
|
|
+ aspect-ratio: 16/9;
|
|
|
+ }
|
|
|
+
|
|
|
@media (max-width: 1280px) {
|
|
|
.screen {
|
|
|
margin-top: -12px;
|
Vincent