header static menu promoted & static content well displayed #2194

src/assets/main.scss

@@ -101,6 +101,21 @@ body{
     }
     section.static{
       @include main-cartouche();
+      h2{
+        font-weight: 400;
+        font-size: 1.323em;
+        padding: 1em 0;
+      }
+      p:not(:last-of-type){
+        margin-bottom: 1em;
+      }
+      img{
+        width: 100%;
+      }
+      iframe{
+        width: 100%;
+        aspect-ratio: 4 / 3;
+      }
     }
     section.concernement{
       @include main-cartouche();

src/views/Static.vue

@@ -3,6 +3,7 @@
 import { mapActions, mapState } from 'pinia'
 import { StaticsStore } from '@/stores/statics'
 
+const videoEmbed = require("video-embed");
 
 export default {
   props: ['id'],
@@ -19,7 +20,21 @@ export default {
     // this.loadStatics()
   },
   methods: {
-    ...mapActions(StaticsStore,['loadStatics'])
+    ...mapActions(StaticsStore,['loadStatics']),
+    getParsedText(){
+      let text = this.statics_byid[this.id].texte;
+      console.log('text', text);
+      let reg = /https:\/\/(vimeo\.com|www\.youtube\.com)\/(watch\?v=)?(\w+)/g;
+      let videolinks = [...text.matchAll(reg)];
+      // console.log('videolinks', videolinks);
+      for (let link of videolinks){
+        console.log('videolink', link);
+        let iframe = videoEmbed(link[0])
+        console.log('iframe', iframe);
+        text = text.replace(link[0], iframe);
+      };
+      return text;
+    }
   },
   components: {
     // MapConcernements
@@ -30,10 +45,10 @@ export default {
 
 <template>
   <section class="static">
-  <span v-if="!loaded">loading ...</span>
-  <!-- <h2 v-if="loaded">{{ this.id }}</h2> -->
-  <h2 v-if="loaded">{{ statics_byid[id].title }}</h2>
-  <div v-if="loaded" v-html="statics_byid[id].texte"/>
+    <span v-if="!loaded">loading ...</span>
+    <!-- <h2 v-if="loaded">{{ this.id }}</h2> -->
+    <h2 v-if="loaded">{{ statics_byid[id].title }}</h2>
+    <div v-if="loaded" v-html="getParsedText()"/>
 
   </section>
 </template>