I'm working on an open source alternative to Plex and I'm trying to get the in-browser video player to take up as much of the window as possible during playback, but I'm running into some problems. The video player built in to Chrome does exactly what I am trying to do if you simply visit the URL for a video in it and so does the Netflix website. However, I've been unable to get this to play nicely on my site.
I've got the following code right now (JSF with PrimeFaces):
div.video-container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: center;
}
.expanded-video {
padding: 0;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; max-width: 100%; max-height: 100%;">
<p:panel header="#{rawPage.getTitle()}" styleClass="ui-noborder video-container">
<video onclick="playPause(this)" ondblclick="toggleFullscreen(this)" id="movie" src="#{rawPage.getUrl()}" type="#{rawPage.getMimeType()}"
width="auto" height="auto" preload='metadata' controls='' autoplay='' autofocus='' class="expanded-video" >
</video>
<script src="http://vjs.zencdn.net/6.2.0/video.js"></script>
</p:panel>
</div>
The problem is that I can either get it to fill the window horizontally or vertically, but if I resize the window, then the video extends beyond the edge of the screen. For example:
the bottom is cut off:
same video, window resized (this behavior is right):
What chrome does if I visit the url for an mp4 file (fits perfectly, nothing cut off):
I know that I can receive window resize events with javascript and set the height and width like that, but I'm looking for a pure HTML+CSS solution to this problem that lets me keep the div at the top showing the title of the movie. (Project already has Twitter Bootstrap)
Edit
The dom looks like this once it's rendered by JSF:
<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; max-width: 100%; max-height: 100%;"><div id="j_idt6" class="ui-panel ui-widget ui-widget-content ui-corner-all ui-noborder video-container" data-widget="widget_j_idt6"><div id="j_idt6_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Big Buck Bunny</span></div><div id="j_idt6_content" class="ui-panel-content ui-widget-content">
<video onclick="playPause(this)" ondblclick="toggleFullscreen(this)" id="movie" src="/media/api/raw/downloads/Big Buck Bunny.mkv" type="video/x-matroska" width="auto" height="auto" preload="metadata" controls="" autoplay="" autofocus="" class="expanded-video">
</video>
</div></div>
</div>
It's also worth noting that we aren't trying to support Internet Explorer or Edge and that, while we'd like to support Safari, we're okay if we can't.
Changing the max-width and max-height to 'width' and 'height' sorted it for me.
You basically told the video that it can be any size as long as it's not over 100%;
.expanded-video {
padding: 0;
margin: 0 auto;
width: 100%;
height: 100%;
}
Hmmm, might have understood incorrectly and am unable to test my solution as videos are blocked at work
You can also use this css trick to adjust ratio of video according to width;
.cover {
min-width: 100%; max-width: 100%; object-fit: cover;
}
Detailed Info Here
Related
I am testing an app through vizio smartcast, and it uses the hls player. The browser uses hls player and works fine with my CSS in browser, but on device (vizio tv) its almost as if it doesn't respect some CSS attributes ( like absolute positioning) or see its parent div.. Does Vizio only support inline CSS? Are there any docs I can read about what they support with CSS? Is my CSS wrong?
<div style="position: relative; width: 300px; height: 100px;">
<video
style="object-fit: cover;
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 100%;"
id="video-player"
muted={isMuted}
bind:currentTime
bind:this={videoElement}
bind:duration
bind:paused
bind:ended
/>
</div>
this shows a white or cut off screen
I'm trying to embed Rumble videos into my site dynamically, that part is working great. However, I can not get the video to take up the full space available unless I specify the width and height of the iframe itself. I have it set to max-width:1000px;width:100%;height:auto;margin:auto; and the player itself takes up the full width as it should but, the video stays small. Nothing I do seem to work... Any Ideas?
(source: thewoodlands.biz)
Found a solution that worked. Just replace the asp classic code in the src string with whatever. Enjoy!
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="videoWrapper"><iframe src="<%= url-link %>" frameborder="0" allowfullscreen></iframe></div>
I have set up a div with many images inside. They are all set to absolute, and they all have top and right set to percentages. All the images stay the same when the window is resized except for one.
Here is the fiddle: https://jsfiddle.net/a268w7ez/
Or, I've put in the key code below.
My html looks like this:
<div id="space">
<div id="map">
<img id="layer9" src="./assets/css/images/layer9.png">
<img id="layer8" src="./assets/css/images/layer8.png">
<img id="layer7" src="./assets/css/images/layer7.png">
<img id="layer6" src="./assets/css/images/layer6.png">
<img id="layer5" src="./assets/css/images/layer5.png">
<img id="layer4" src="./assets/css/images/layer4.png">
<img id="layer3" src="./assets/css/images/layer3.png">
<img id="layer2" src="./assets/css/images/layer2.png">
<img id="layer1" src="./assets/css/images/layer1.png">
<img id="cantonica" class="planet" src="./assets/css/images/dot.png">
</div>
</div>
And my CSS looks like this:
#map {
display: block;
position: relative;
top: 2%;
height: 76%;
width: 33%;
margin: auto;
z-index: 0;
}
#layer9 {
height: 100%;
margin: auto;
position: relative;
z-index: 1;
}
#layer8 {
height: 90.11553273427471%;
position: absolute;
top: 5.006418485237484%;
left: 3.465982028241335%;
z-index: 2;
}
// The #layer id's go on like this with different heights, tops, and
// lefts, all set in percentages.
.planet {
width: 10px;
}
#cantonica {
position: absolute;
top: 12.195121951219512%;
right: 14.120667522464696%;
z-index: 10;
}
It looks correct at first on my browser, the white dot image is in the right spot:
But when I resize the window, everything stays in the same spot except the white dot:
I am going to be adding MANY more dots (50+), so it's really important that I can resize the window and they all stay in the same spot.
Thanks for the help in advance.
Following your pattern, it looks like you want every lower layer to be a little bit bigger than the previous one. Because you've applied a height: 100%; to layer9, I'm assuming that that layer is going to be the full size of the container.
You can use the same CSS styling that you've used on all the other layers, but just make it the full size of its container:
#layer9 {
height: 100%;
position: absolute;
top: 0%;
left: 0%;
z-index: 1;
}
The problem was caused because you applied a relative position to layer9, which means it's going to shrink or grow in size if the height is a percentage (100%).
Updated JSFiddle
I have the following issue..
I'm trying to place an image in my header. However, every time I try to view the website from a handheld device (eg. mobile phone) the image that I've placed is overlapping with my logo...
<style>
#babypic{
position: absolute;
max-width: 200px;
height: auto;
left: 0;
top: 111px;
}
</style>
<div id="babypic">
<img src={{ 'baby2.png' | asset_url }}>
</div>
The following screenshots might help you to understand my issue better:
As you can see in the first pic, the baby is in perfect position. However, when I'm trying to reduce the window or access the site from mobile phone the baby overlaps with the logo as shown in the second picture.
you should resize the baby pics or increase the header height and change the style #babypic{
position: absolute;
max-width: 200px;
height: auto;
left: 0;
bottom: 0px;
}
in case the baby picture is on bottom.
I have a problem with precise positioning of three equal divs.
My humble knowledge of math reminds that 33+33+33=99%, and 1% is missed. Moreover, 33.33+33.33+33.33=99.99%, but browser compatibility does nothing with it.
<div id='products-choice-wrap'>
<div id='products-choice'>
<div id='choice1' class='three-bubbles'>
<img src='/products/image1.png' alt='' />
</div>
<div id='choice2' class='three-bubbles'>
<img src='/products/image2.png' alt='' />
</div>
<div id='choice3' class='three-bubbles'>
<img src='/products/image3.png' alt='' />
</div>
</div>
</div>
And CSS:
#products-choice-wrap
{ position: absolute; width: 100%; bottom: 0;
top: 100px; text-align: center; }
#products-choice
{ position: absolute; width: auto; left: 40px;
right: 40px; margin: 0px auto; top: 0; bottom: 0; height: auto;
max-width: 1080px; }
#products-choice div
{ position: absolute; top: 20px; height: auto;
overflow: auto; width: auto; padding-bottom: 200px; }
#products-choice #choice1.three-bubbles
{ left: 0; right: 66.7%; }
#products-choice #choice2.three-bubbles
{ left: 33.37%; right: 33.37%; }
#products-choice #choice3.three-bubbles
{ left: 66.7%; right: 0; }
In this construction three images are situated in the center of the page in a row. In case of small resolution they become smaller while #products-choice becomes narrow. The attribute max-width prevents images from overzooming.
Positioning should be very precise because of smooth lines connections between them (see links to examples below). The problem appears when comparing different resolutions in different browsers. It looks like in Chrome such positions as 33.37% to 66.7% provide excellent picture both on resolution 1280x*** (#products-choice is max-width: 1080px) and smaller 1024x*** (#products-choice width becomes 929px). Click here for image.
IE and Firefox show a 1-px-gap between images, which disppears and appears again after browser size changing. Click here for image.
What can I do to say Chrome, IE and Firefox exact width (which is actually 1/3)?
You can't achieve perfect 1/3 widths at all times with an elastic layout, so here's what I suggest:
Instead of using the position property to place your images, float:left them instead. This will ensure the three images are pressed up tight against one another, without the 1px gap appearing between them.
The downside: Sometimes you'll have a 1px gap to the right of the last image. You can sort of cover this up by assigning a background to the wrapper element, but in your case it seems like a better deal than having your images split apart.
.three-bubbles {
float:left;
width:33.33333%;
}
Demo: http://jsfiddle.net/qemUY/2
I left a lot of your CSS in which wasn't needed, because I don't know all of your requirements, but if you take this approach, your current code can be trimmed down considerably.
Simpler demo: http://jsfiddle.net/qemUY/4
Try to use
#products-choice-wrap {width: 99.99%;} or a lower value.
I had this issue before and I fixed it by setting the wrapper with {width:99.92%}.
I don't know why "99.92%", but I just tried some values on the inspector and that was the best fit.