I am trying to style the videojs CSS for the ChapterButton menu so that it expands to accommodate varying line lengths (e.g. no line wrapping). I can expand it to a fixed width but I need it to handle varying line lengths. Is there an easy way to do this? Am I looking at the right CSS rule?
Existing CSS
.vjs-menu-button-popup .vjs-menu {
display: none;
position: absolute;
bottom: 0;
width: 10em;
left: -3em;
height: 0em;
margin-bottom: 1.5em;
border-top-color: rgba(43, 51, 63, 0.7);
}
.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
background-color: #2B333F;
background-color: rgba(43, 51, 63, 0.7);
position: absolute;
width: 100%;
bottom: 1.5em;
max-height: 15em;
}
Result
My CSS override
.vjs-menu-button-popup .vjs-menu {
width: 20em;
left: 1em;
}
Result
fit-content should work if the 100% width is unset on .vjs-menu-content
.vjs-chapters-button.vjs-menu-button-popup .vjs-menu {
width: fit-content;
}
.vjs-chapters-button.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
width: unset;
}
Related
I'm created a progress bar and for some reason, it shows a weird outline and I don't know what to change to fix it. Here is a picture below. You can see that tiny spacing and I don't know why it shows there
Here is a codepen showing the same exact outline issue https://codepen.io/designextras/pen/PoZKJMK
Note: I am using google chrome to view this
html code
<div id="progressBar">
<div id="progressBarFull"></div>
</div>
css code
#progressBar {
width: 20rem;
height: 4rem;
border: 0.2rem solid rgb(18, 93, 255);
margin-top: 2rem;
border-radius: 66px;
overflow: hidden;
z-index: 1;
}
#progressBarFull {
height: 4rem;
background-color: rgb(18, 93, 255);
width: 50%;
}
remove this line.
#progressBarFull {
height: 100%;
background-color: rgb(18, 93, 255);
width: 50%;
}
world {
width: 100%;
height: 100%;
position: absolute;
perspective:800px;
}
bg {
width: 100%;
height: 100%;
position: absolute;
z:1;
transform:rotateX(20deg) rotateY(10deg);
background: url(https://images.pexels.com/photos/1154498/pexels-photo-1154498.jpeg?auto=compress&cs=tinysrgb&h=1250);
}
layer_wrap {
width: 350px;
height: 60px;
position: absolute;
top: 50%;
left: 50%;
mix-blend-mode: overlay;
z:100;
perspective:500px;
transform-style:flat;
backface-visibility:hidden;
}
layer {
position:relative;
background: rgba(0, 122, 255,0.8);
padding: 20px;
color: #fff;
text-transform: uppercase;
font-family: "Arial";
font-size: 30px;
text-align: center;
transformOrigin:50% 50% 50%;
transform:translateX(-50%) translateY(-50%) rotateX(30deg) rotateY(5deg) translateZ(0.001px);
}
<world>
<bg></bg>
<layer_wrap>
<layer>THIS IS A LAYER</layer>
</layer_wrap>
</world>
In the example the bg container and the layer_wrap container must be on the same level to be able to use mix-blend-mode and for other requirements of the Project.
The Results how it is rendered in Safari and Chrome are different. Safari cuts the half of the Layer rendering the whole world in one container. transformStyle preserve-3d or other Tricks were not helpful.
Also a transformZ is not the solution since it would change the size and distance to viewer.
Hope one of you guys have a good solution for this. Cheers !
Can someone help me regarding this http://www.alerto24.com/
Why is there a wide space to the right and the horizontal scrollbar is visible?
Both your footer and content section have a right margin of -100% which causes the scrollbar. Disable that CSS property for both elements and the scrollbar is gone.
please change below css
#content::before {
background: rgba(0, 0, 0, 0) url("../images/site-bg-b.jpg") no-repeat scroll 50% 0;
content: " ";
/*left: -100%;
position: absolute;
right: -100%;
top: 0;
bottom: 0;
z-index: -1;*/
}
#footer::before {
background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
border-top: 1px solid #032d34;
content: " ";
/*left: -100%;
position: absolute;
right: -100%;
top: 0;
bottom: 0;
z-index: -1;*/
}
I think there is a structure problem in your #footer and #content.
For example. You put background properties to apply a 100% background in :before and a max-width: 920px combined with width: 100% in footer element, which appears like a contradiction.
I suggest you these modifications :
You remove #content:before and #footer:before properties. You can create a container div in your #content element which contains the width of the website like this :
#content .container {
width: 920px;
margin: 0 auto;
}
And you apply background properties on #content which has width: 100%;
#content {
width: 100%;
background: blue; /* you put your background properties on it */
}
Also, you do the same for footer :
#footer {
position: relative;
z-index: 1;
width: 100%;
/* max-width: 920px; remove this line */
background: blue; /* you put your background properties on it */
margin: 0 auto;
padding: 30px 0 15px;
color: #fff;
}
#footer .wrap {
position: relative;
margin: auto; /* you use this property to center this container as it is on the website */
padding: 0 0 50px;
font-size: 0;
width: 920px; /* you apply width on this container instead of the #footer container */
letter-spacing: -5px;
}
EDIT : I've made a JSFiddle to explain my thoughts
See it here
I need to add a transparent coloured layer over a background image. I tried doing this with rgba but with no result.
What I get now is:
page-heading {
background: rgba(36, 70, 105, 0.74) url("../images/samples/bg3.jpg") no-repeat fixed 50% 0px / cover;
opacity: 0.9;
position: relative;
text-align: center;
padding: 72px 0px;
}
I know that the background color is a fallback for when the image cannot be loaded. How do I add a layer over it in a correct way?
Use a simple box-shadow inset:
.page-heading {
background: url(../images/samples/bg3.jpg) no-repeat fixed 50% 0px / cover;
box-shadow: inset 0 0 0 100px rgba(36, 70, 105, 0.74);
}
JS Fiddle: http://jsfiddle.net/ghorg12110/q0cLf2s7/
I see that a lot of people here create an extra element or pseudo elements, but you don't need two elements to create this effect. You can simply declare two background-images. One of which is the original image, and the other a linear gradient. See this Fiddle to see the effect working.
background-image: linear-gradient(rgba(36,70,105,.74), rgba(36,70,105,.74)),
url("https://dummyimage.com/1000x1000/3/f.png&text=Background-image");
Note that you first have to declare the gradient and then the image (I always get this wrong the first time I try to make this)
You can do this with a gradient like the fiddle below.
The left is the original image. The right is the one with the gradient applied.
.block {
width: 300px;
height: 300px;
display: inline-block;
}
.og {
background: url(http://placehold.it/300x300);
}
.ed {
background: linear-gradient(rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.2)), url(http://placehold.it/300x300);
}
<div class="block og"></div>
<div class="block ed"></div>
Use a pseudo element...
.page-heading {
background: url("http://lorempixel.com/400/200") no-repeat fixed 50% 0px / cover;
opacity: 0.9;
position: relative;
text-align: center;
padding: 72px 0px;
}
.page-heading:before {
content: "";
background: rgba(36, 70, 105, 0.74);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="page-heading">
</div>
You can use a pseudo-element to place over your . This way you won't use an extra DOM element.
.element {
background: url('http://lorempixel.com/500/500/');
height: 500px;
width: 500px;
position: relative;
}
.element:after {
background: rgba(0,0,0,0.8);
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
JSFiddle here: http://jsfiddle.net/volzy/LLfhm0kc/1/
body{
background-color: #ccc;
margin:0px;
}
.page-heading {
background: rgba(36, 70, 105, 0.74);
opacity: 0.4;
margin: 0;
position: relative;
width:100%;
height:100vh;
text-align: center;
padding: 72px 0px;
}
I use body but the element could be something else
Hi, here a fiddle :
http://jsfiddle.net/5f46znzx/
is what you are looking for?
remember that opacity trasform each element with the opacity set.
i suggest to eliminate it if you dont need that internal element takes opacity.
You need another box above the header. Imagine that's your HTML:
<div class="page-heading">
<div class="page-heading-fake">
</div>
</div>
You can have this CSS
.page-heading {
background: url(yourimg.png);
position: relative; /* neccesary to make an anchor in the fake */
}
.page-heading-fake {
position: absolute;
top: 0;
left: 0;
background-color: rgba(36, 70, 105, 0.74) ;
}
I would like to change the videojs v5 controls layout in order to make a full width progress bar, on top of the vjs-control-bar area, similar to the pre-v5 player skin.
Here is the v5 skin:
And here is the pre-v5 skin. Notice the full width progress bar:
How should I proceed? Is it necessary to modify the component structure tree within the ProgressControl component or can it be done using CSS only, with the existing ProgressControl component?
I noticed that I can put it on top by changing the vjs-progress-control display CSS property from flex to block, initial or inline but I can't set the width to 100% (other ProgressControl components width are still considered). I assume it is because the vjs-progress-control is still in the flex flow of the container.
EDIT
I made some progress. I can achieve the desired effect by using the following CSS:
.vjs-progress-control {
position: absolute;
bottom: 26px; /* The height of the ControlBar minus 4px. */
left: 0;
right: 0;
width: 100%;
height: 10px; /* the height must be reduced from 30 to 10px in order to allow the buttons below (e.g. play) to be pushed */
}
.vjs-progress-holder {/* needed to have a real 100% width display. */
margin-left: 0px;
margin-right: 0px;
}
Unless one of you find a way to make it better, I will post this edit as accepted answer when it will be allowed.
DEMO
.vjs-fluid {
overflow: hidden;
}
.vjs-control-bar {
display: block;
}
.vjs-control {
position: absolute;
}
.vjs-progress-control {
bottom: 28px; left: 0;
height: 10px;
width: 100%;
}
.vjs-progress-holder {
position: absolute;
left: 0; margin: 0;
height: 8px; width: 100%;
}
.vjs-play-progress,
.vjs-load-progress {
height: 8px;
}
.vjs-play-progress:before {
font-size: 12px; top: -2px;
text-shadow: 0 0 2px black
}
.vjs-current-time {
display: block;
left: 35px;
}
.vjs-time-divider {
position: absolute;
display: block;
left: 70px;
}
.vjs-remaining-time {
display: none;
}
.vjs-duration {
display: block;
left: 70px;
}
.vjs-volume-menu-button {
position: absolute;
bottom: 0; right: 55px;
}
.vjs-playback-rate {
position: absolute;
bottom: 0; right: 28px;
}
.vjs-fullscreen-control {
position: absolute;
bottom: 0; right: 0;
}
There's still need to style the subtitles, captions and chapter buttons
.video-js .vjs-progress-control {
position:absolute;
width: 100%;
top:-.3em;
height:3px;
/* deal with resulting gap between progress control and control bar that
is the result of the attempt to keep things "clickable" on the controls */
background-color: #2B333F;
background-color: rgba(43, 51, 63, 0.7);
}
.video-js .vjs-progress-holder {
position:absolute;
margin:0px;
top:0%;
width:100%;
}
This seemed to get rid of the problems I had across other browsers with the :hover styling inherited from video.js. More masterful css developers might be able to make the expansion a bottom-to-top expansion, negating the need for the fancy footwork around the position of the progress control and the color.
Here is a minimal custom skin (in scss) that shows a full-width progress bar above the rest of the controls. This works with video.js 5.19.2
.video-js.vjs-custom-skin {
.vjs-custom-control-spacer {
display: flex;
flex: 1 1 auto;
}
.vjs-time-divider {
display: inherit;
}
.vjs-current-time {
margin-left: 1em;
}
.vjs-current-time, .vjs-duration {
display: inherit;
padding: 0;
}
.vjs-remaining-time {
display: none;
}
.vjs-play-progress:before {
display: none;
}
.vjs-progress-control {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: .5em;
top: -.5em;
&:hover {
height: 1.5em;
top: -1.5em;
}
}
.vjs-progress-holder {
margin: 0;
height: 100%;
}
}