Video.js设置width="100%" height="100%"无效，如何修复全屏显示问题？

Hey there, let's fix this Video.js fullscreen issue you're running into. Since JW Player works perfectly, the problem is almost certainly tied to Video.js's default styling or how your video element/container is configured. Here are some practical, tested fixes you can try:

• Override Video.js default styling with custom CSS
  Video.js comes with built-in padding, margin, or max-width constraints that might be blocking fullscreen. Add this CSS to your op.css file or a <style> tag on the page to override those defaults:

  /* Ensure the video container takes all available space */
  .video-js {
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Force fullscreen to cover the entire viewport */
  .video-js.vjs-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Make sure the video tech element stretches fully */
  .video-js .vjs-tech {
    width: 100% !important;
    height: 100% !important;
  }
  

• Fix your video tag attributes
  Right now, you've added width and height to the <source> tag—those don't do anything there. Move them to the <video> tag itself, and tweak the data-setup config to disable fluid mode if you want strict fullscreen control:

  <video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered" 
         controls preload="auto" poster="IMG-LINK" 
         width="100%" height="100%"
         data-setup='{"fluid": false}'>
    <source src="VIDEO-LINK" type="video/mp4">
  </video>
  

  Note: If you need responsive layout for non-fullscreen, keep fluid: true but pair it with the CSS above to enforce full viewport coverage when in fullscreen mode.

• Check the parent container's constraints
  Your video is wrapped in a <div align="center">—this container might have hidden width/height limits. Try adding styling to this parent div to remove any restrictions:

  div[align="center"] {
    width: 100%;
    height: 100vh; /* Covers the entire viewport height */
    padding: 0;
    margin: 0;
  }
  

  Alternatively, replace this div with CSS-based centering (like margin: 0 auto on the video container) to avoid unnecessary layout constraints.

• Update to the latest Video.js version
  Older versions of Video.js had known bugs with fullscreen API compatibility. Upgrading to the latest stable release will resolve many of these out-of-the-box issues.

If you're still having trouble after trying these steps, double-check for global CSS conflicts (like a site-wide box-sizing override). You can add this to isolate Video.js elements:

.video-js * {
  box-sizing: border-box !important;
}

内容的提问来源于stack exchange，提问作者user9273738