Vue.js vue-video-player rend 100px de large

Question

J'ai commencé à intégrer vue-video-player. Le joueur rend à seulement 100px de large. Je ne sais pas pourquoi ou comment le changer.

Je n'ai rien trouvé dans la documentation. En fait, l'inclusion des fichiers css était un peu confuse et je ne suis pas sûr que mon importation (par rapport au require dans les docs) soit correcte.

Comment puis-je définir la largeur du lecteur?

<template> 
    <div> 
     <video-player 
       ref="videoPlayer" 
       :options="playerOptions" 
       :playsinline="true" 
     > 
     </video-player> 
    </div> 
</template> 


<script> 
    import { videoPlayer } from 'vue-video-player' 
    import 'video.js/dist/video-js.css' 
    import 'vue-video-player/src/custom-theme.css' 


    export default { 
     name: 'foo', 

     components: { 
      videoPlayer, 
     }, 

     data() { 
      return { 
       playerOptions: { 
        muted: true, 
        language: 'en', 

        playbackRates: [1.0], 

        sources: [{ 
         type: "video/mp4", 
         src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm" 
        }], 

        poster: "/static/images/defaults/image.png", 
       } 
      } 
     }, 
    } 
</script> 

Answer 1

dans les playerOptions définir la largeur et la hauteur

playerOptions: { 
    // videojs options 
    muted: true, 
    language: 'en', 
    techOrder: ['html5', 'flvjs'], 
    playbackRates: [0.7, 1.0, 1.5, 2.0], 
    width: '800px', 
    height: '800px', 
    plugins: { 

    }, 
    flash: { 
     swf: './#/assets/video-js.swf' 
    }, 
    poster: './#/assets/logo.png', 
    sources: [ 
    ] 
    } 
}