Hello,

I recently made my videojs player responsive with this code:

* {max-width: 100%} /* the usual RWD shebang */

.video-js {
    width: auto !important; /* override the plugin's inline dims to let vids scale fluidly */
    height: auto !important;
}

.video-js video {position: relative !important;}
 /* The video should expand to force the height of the containing div.
 One in-flow element is good. As long as everything else in the container
 div stays `position: absolute` we're okay */

.video-js .vjs-big-play-button {
    top: 50%; /* errrr, why isn't the play button centered in the default skin? :) */
    left: 50%;
    margin:-4em 0 0 -6em; /* the old negative margin trick */
}

But it broke my jCarousel slideshow CSS. It assigns the auto width to it to (because they are both in grid-inner clearfix) and now my overflow is all over my front page, because of the width. Any ideas how to fix it ?

Thanks

Comments

etz01’s picture

Found the problem - did not notice the * {max-width: 100%} * automatically over-writes everything, so that broke the CSS. Hope this helps someone else too.

etz01’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.