youtube player is working

src/components/contents/TerrainDeVie.vue

@@ -7,10 +7,6 @@ import { UserStore } from '@/stores/user'
 
 import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
 
-import { VideoPlayer } from '@videojs-player/vue'
-import 'videojs-youtube'
-import 'video.js/dist/video-js.css'
-
 import VueSlider from 'vue-slider-component'
 import 'vue-slider-component/theme/antd.css'
 
@@ -50,7 +46,6 @@ export default {
   },
   components: {
     CartoucheLayout,
-    VideoPlayer,
     VueSlider
   }
 }
@@ -117,16 +112,16 @@ export default {
               <section
                 v-if="source.videos.length"
                 class="video multiple">
-                <!-- <a 
-                  v-for="(video,v) in source.videos"
-                  :key="v"
-                  :href="video.url">{{ video.url }}</a> -->
-                  <VideoPlayer
+                  <vue-plyr
                     v-for="(video,v) in source.videos"
-                    :key="v"
-                    type="video/youtube"
-                    :src="video.url"
-                    controls/>
+                    :key="v">
+                      <div class="plyr__video-embed">
+                        <iframe 
+                          :src="video.url"
+                          allowfullscreen
+                        ></iframe>
+                      </div>
+                  </vue-plyr>
               </section>
           </section>
         </section>

src/main.js

@@ -9,7 +9,10 @@ import '@csstools/normalize.css';
 import './assets/main.scss'
 
 // var decomp = require('poly-decomp');
-// window.decomp = decomp;       
+// window.decomp = decomp;
+
+import VuePlyr from 'vue-plyr'
+import 'vue-plyr/dist/vue-plyr.css'
 
 const app = createApp(App)
 // https://vuejs.org/guide/components/provide-inject.html#provide
@@ -20,4 +23,7 @@ pinia.use( ({store}) => { store.router = router } )
 app.use(pinia)
 app.use(router)
 // app.use(VueCollapsiblePanel)
+app.use(VuePlyr, {
+  plyr: {}
+})
 app.mount('#app')