How to adjust the size of the controlBar? #8066
Comments
|
👋 Thanks for opening your first issue here! 👋 If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. |
|
@YorkeSun you can try something like : JavaScript const player = new videojs('player', {
controls: true,
responsive: true,
//other options...
});CSS .vjs-layout-tiny {
font-size: 8px;
}
.vjs-layout-x-small {
font-size: 10px;
}
.vjs-layout-small {
font-size: 12px;
}
.vjs-layout-medium {
font-size: 14px;
}
.vjs-layout-large {
font-size: 16px;
}
.vjs-layout-x-large {
font-size: 18px;
}
.vjs-layout-huge {
font-size: 20px;
}Please refer to https://videojs.com/guides/options/#breakpoints, you can also check https://videojs.com/guides/layout/ Bonus If you want to be more flexible, you can imagine something like the code below that allows for easy theming: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breakpoints</title>
<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
<style>
:root {
/* Defines the default font sizes */
--layout-default-font-size: 10px;
--layout-tiny-font-size: calc(var(--layout-default-font-size) * 0.8);
--layout-x-small-font-size: var(--layout-default-font-size);
--layout-small-font-size: calc(var(--layout-default-font-size) * 1.2);
--layout-medium-font-size: calc(var(--layout-default-font-size) * 1.4);
--layout-large-font-size: calc(var(--layout-default-font-size) * 1.6);
--layout-x-large-font-size: calc(var(--layout-default-font-size) * 1.8);
--layout-huge-font-size: calc(var(--layout-default-font-size) * 2);
}
html,
body {
height: 100%;
margin: 0;
}
/* Applies the default font sizes to each breakpoint */
.vjs-layout-tiny {
font-size: var(--layout-tiny-font-size);
}
.vjs-layout-x-small {
font-size: var(--layout-x-small-font-size);
}
.vjs-layout-small {
font-size: var(--layout-small-font-size);
}
.vjs-layout-medium {
font-size: var(--layout-medium-font-size);
}
.vjs-layout-large {
font-size: var(--layout-large-font-size);
}
.vjs-layout-x-large {
font-size: var(--layout-x-large-font-size);
}
.vjs-layout-huge {
font-size: var(--layout-huge-font-size);
}
/* Defines a custom skin */
.custom-skin {
--layout-tiny-font-size: 10px;
--layout-x-small-font-size: 14px;
--layout-small-font-size: 18px;
--layout-medium-font-size: 22px;
--layout-large-font-size: 26px;
--layout-x-large-font-size: 30px;
--layout-huge-font-size: 34px;
}
</style>
</head>
<body>
<video-js id="player"></video-js>
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
<script>
const player = videojs('player', {
controls: true,
fill: true,
muted: true,
responsive: true,
inactivityTimeout : 0,
});
player.src('https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8');
//The custom skin is applied if the current time is between 10 and 20 seconds
player.on('timeupdate', ()=>{
const currentTime = player.currentTime();
player.toggleClass('custom-skin', currentTime > 10 && currentTime < 20);
});
</script>
</body>
</html>Hope this helps. |
|
Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:
|
Description
I just started learning to use video.js and I use "simple-embed" from the official example. After I adjusted the width to 100%, I found that the controlbar is very small. How can I make the controlbar adaptively adjust the size?
https://raw.githubusercontent.com/YorkeSun/photo/main/videojs-menu.png
Reduced test case
No response
Steps to reproduce
I just changed these codes:
<video id="example_video_1" webkit-playsinline="true" style="width:100%;" class="video-jsn vjs-big-play-centered" controls preload="auto" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">Errors
No response
What version of Video.js are you using?
7.20.3
Video.js plugins used.
none
What browser(s) including version(s) does this occur with?
chrome
What OS(es) and version(s) does this occur with?
mac
The text was updated successfully, but these errors were encountered: