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
Related
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'm trying to style a typcial banner image for a site, so that for narrower viewports the vertical height is maintained and the image effectively stays the same size by going beyond the parent element horizontally. (I think this is fairly typical banner image behaviour - but feel free to correct me if I'm wrong).
(browser target is ie10 and up). The below incorrectly keeps the image ratio and at 100% width so that if fails to match the height of the parent.
The current html is just an img inside a div tag
<div class="banner">
<img class="img-fluid" src="somepic.jpg" />
</div>
Where the css classes used are:
.banner {
content: "";
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 780px;
}
and img-fluid is a bootstrap(4) class with
img-fluid {
max-width: 100%;
height: auto;
}
Use a background-image instead, there are a couple interesting behaviours that can be used to achieve different results.
Here's my take:
.banner {
content: "";
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 780px;
background-image:url('somepic.jpg');
background-size:cover;
}
The key here is background-size:cover;, it will make sure the image stretches to cover the full width and height while keeping its ratio. That means on very wide screens, it will be made larger, cutting some height. But on thinner resolutions you'll get the desired output.
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
I'm attempting to create a class for embedded youtube videos that will display them at 100% width in the div, and will adjust the height according to the video's aspect ratio.
I have found the following suggestion here:
.fluidMedia {
position: relative;
padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
padding-top: 30px;
height: 0;
overflow: hidden;
}
.fluidMedia iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="fluidMedia">
<iframe src="" frameborder="0"> </iframe>
</div>
but this relies on every video having the same aspect ratio to work. I'd prefer to write one class that just works, regardless of the video embedded into it. Can this be done without javascript?
The only CSS solution is the one you used, where you need to set the ratio in your CSS file – therefore there is no generic frontend solution without JavaScript.
You could have Drupal extract the ratio for you, of course – and write it into an inline CSS style property like
<div class="fluidMedia" style="padding-bottom: <?=$imgWidth/$imgHeight?>">
How to get the Video ratio would be a Drupal or PHP question.
For the JavaScript Solutionsee AndyM's link: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
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.