5

i came a crosss very different problem, in fullscreen mode my plyrjs is not playing video to fullscreen

i tried to reproduce the problem with same code in codepen but it works in codepen why?.

Question: why same code produces fullscreen in codepen but not in my project, in any browser.

here is screen shot (played in fullscreen mode in my project):

enter image description here

**

var videoPlayer = new Plyr('#plyr-video');

var src  = 'https://vjs.zencdn.net/v/oceans.mp4';

     videoPlayer.source = {
         type: 'video',
         title: 'Example title',
         sources: [
          {
               src: src,
               type: 'video/mp4',
               size: 720
           }
         ],
         poster: ''
       };
<link href="https://cdn.plyr.io/3.4.7/plyr.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.plyr.io/3.4.7/plyr.polyfilled.js"></script>
   <video controls crossorigin playsinline id="plyr-video" controlsList="download" controls style="max-width: 533px;max-height: 300px;">
                    <source src="" type="video/mp4">
                    <source src="" type="video/webm">
                    <track kind="captions" label="English captions" src="" srclang="en" default>
                  </video>

Codepen demo:https://codepen.io/eabangalore/pen/wRdGGB

EaBengaluru
  • 131
  • 2
  • 17
  • 59

1 Answers1

2

Make sure your <link and <script import statements are declared early on in your code.

<link rel="stylesheet" href="https://cdn.plyr.io/3.4.7/plyr.css" />
<script src="https://cdn.plyr.io/3.4.7/plyr.polyfilled.js"></script >
ToddBFisher
  • 11,370
  • 8
  • 38
  • 54
GrupoMasterPlan
  • 21
  • 3
  • I think what @grupoMasterPlan is suggesting is to put your `` css imports within your `` tag. Example: ` (put here) ` – ToddBFisher Oct 16 '20 at 15:05