Change video.js size

[user9823749]

Hi, How i can change default video.js size when i click on video its open but is small i want min-width: 100% to make it on full window and keep proportion. I cannot find it on css file Thank you

[sachinchoolur]

You can set videoMaxWidth : none to remove max width https://sachinchoolur.github.io/lightgallery.js/docs/api.html#lg-video

[user9823749]

When i use that function its disables videojs player and controls like share download etc

[sachinchoolur]

If you set max-width none, it will occupy full space. You can set whatever max-width value based on your requirement For example,

videoMaxWidth: 'calc(100% - 250px)';

[user9823749]

echo '          <script type="text/javascript">'
echo '                  $(document).ready(function() {'
echo '                          var $lg = $("body");'
echo '                          $lg.lightGallery({'
echo '                                  selector: ".lightbox-file",'
echo '                                  fullScreen: true,'
echo '                                  thumbnail: false,'
echo '                                  videojs: true,'
echo '                                  videoMaxWidth: 'calc(100% - 250px)';'
echo '                          });'
echo '                          $lg.on("onAfterOpen.lg", function(){'
echo '                                  $lg.data("lightGallery").modules.fullscreen.requestFullscreen();'
echo '                          });'
echo '                  });'
echo '          </script>'

when i add videoMaxWidth i dont have longer videojs player and got no top buttons its open trought regular browser player and i cant scroll it left right and no thumbnail I want thumbnails video to be fullscreen and video as well without clicking on video play button.

[sachinchoolur]

There is a syntax error in your code

• videoMaxWidth: 'calc(100% - 250px)';'

please fix the issue and try again. If the issue persists, please provide a jsfiddle demo. I'll fix the issue and send it back to you

[user9823749]

echo '          <script type="text/javascript">'
echo '                  $(document).ready(function() {'
echo '                          var $lg = $("body");'
echo '                          $lg.lightGallery({'
echo '                                  selector: ".lightbox-file",'
echo '                                  fullScreen: true,'
echo '                                  thumbnail: false,'
echo '                                  videojs: true,'
echo '                                  videoMaxWidth: none,'
echo '                          });'
echo '                          $lg.on("onAfterOpen.lg", function(){'
echo '                                  $lg.data("lightGallery").modules.fullscreen.requestFullscreen();'
echo '                          });'
echo '                  });'
echo '          </script>'

still the same

[sachinchoolur]

Hey @user9823749 ,

Oh my bad. You need to add the following styles to your document.

.lg-outer .lg-video {
    width: auto;
    height: auto;
    padding: 0;
    position: static;
}

Here is the demo = https://codepen.io/lightGallery/pen/PozdEyx

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If the issue is still valid for version 2.x, please re-open. Apologize for not responding on time. Thank you for your contributions.