I would like to remove progress bar from CAF receiver while playing live stream
https://developers.google.com/cast/docs/caf_receiver/customize_ui
try setting the progress color to a transparent value
cast-media-player {
--progress-color: rgba(0, 0, 0, 0.0);
}
also, use the inspector and check the DOM - this one should be
.player .controls-progress {
display: none;
}
Related
Can we change the background color used for the bars which display on top and below a video, when a video doesn't fit the screen?
By default it is a dark gray, which is very distracting.
I tried this to see if it can be changed at all. But it didn't change:
.background {
background: center no-repeat url(my_background_url)
background-color: rgb(255, 255, 255);
...
}
Adding this to your custom stylesheet will do the trick:
#player video {
background-color: black;
}
However, I think Google should not set a background-color on the video element (currently #111 I think)
I am working on a WordPress theme and am trying to incorporate retina enabled CSS queries into my CSS file.
I would just like to clarify that I have the media queries set up correctly before I change out all my background images.
I have doubled the size of all my background images and perfixed
them with the "#2x" naming convention. e.g icon-user#2x.png.
I have added a jQuery function into my code to swap out the images with the CSS class of hires.
In my CSS document I have a normal CSS class for a background image.
Normal CSS query
.side-nav .arrow {
background: url(../images/arrow-nav.png) no-repeat top left;
width: 5px;
height: 8px;
display: inline-block;
margin-left: 10px
}
Is this the correct way i would change the .side-nav .arrow class for a retina enabled device? When declaring the background size do I keep the size that of the original smaller image?
/* All Retina Ready devices larger than 1.5 pixel ratio */
#media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.side-nav .arrow {
background-image:url(../images/arrow-nav#2x.png);
-webkit-background-size:5px 8px;
-moz-background-size:5px 8px;
-o-background-size:5px 8px;
background-size:5px 8px
}
}
jQuery Code
$(function () {
if (window.devicePixelRatio == 2) {
var images = $("img.hires");
/* loop through the images and make them hi-res */
for(var i = 0; i < images.length; i++) {
/* create new image name */
var imageType = images[i].src.substr(-4);
var imageName = images[i].src.substr(0, images[i].src.length - 4);
imageName += "#2x" + imageType;
/* rename image */
images[i].src = imageName;
}
}
});
Thank you
As long as there is some form of scaling taking place, like when you declare
<meta name="viewport" content="width=..."> (for android/ios/blackberry/WP8)
or
#ms-viewport {width: ... ;} (for non-WP8 IE10)
or ... even if you declare nothing most mobile devices will by default automatically scale such that viewport width=980px
then all CSS dimensions you declare with 'px' will exist in the same proportion to their viewport regardless of differences between their physical DPI/PPI
this means you shouldn't have to change a single thing about your style class except the background image's URL when the media query matches a high res device:
#media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
.side-nav .arrow {
background-image:url(../images/arrow-nav#2x.png);
}
}
I have a CSS3 rotate transform with a cubic-bezier transition-timing-function, it is working fine on mouse over, but i want to disable the mouseleave animation. I prepared a simple jsFiddle to show you.
img {
transition : all 1s cubic-bezier(0.680,-0.550,0.265,1.550);
}
img:hover {
transform: rotate(360deg);
}
You mean you don't want it to transition back when you hover off? You can use an "infinite" (actually very large) transition-delay (that's the second time value in the shorthand) for that.
Like this:
demo
CSS:
img {
transition: 0s 99999s; /* transition when mouse leaves */
}
img:hover {
transform: rotate(360deg);
/* transition on mouseover */
transition: 1s cubic-bezier(0.680,-0.550,0.265,1.550);
}
Note that this will make the image rotate only on first hover.
If you want to make it rotate for each hover, then you'll have to use keyframe animations. Like this:
demo
CSS (no prefixes, you'll have to add them):
img:hover {
animation: rot 1s cubic-bezier(0.680,-0.550,0.265,1.550);
}
#keyframes rot {
to {
transform: rotate(360deg);
}
}
Also, I noticed that you were writing the unprefixed property first - you should always put it last. Especially now, when the coming versions of IE, Firefox and Opera are unprefixing transitions.
It is possible to draw a rect with a border, which appears left, right and top.
What I want is a tabbar with a border around everything (content and buttons), but the borderline between button and content should disappear.
I think, the easiest way would be to draw a border around a rect without the bottomline.
Try using the CSS "outline" command.
Something like this :
#tabContainer {
border: 1px solid #DDD;
outline: black solid thick;
}
How can I make a CSS3 Animation play to the end and then stop dead. I don't want it to return the elements being transformed back to their initial states.
Right now I'm using some javascript to add a class to the element after the animation's duration with the same properties as 100% in the animation.
This is possible with the "animation-fill-mode" defined as "forwards", at least in Webkit. I got this result with code like this:
#-webkit-keyframes test {
100% { background-color: #0000ff; }
}
a { background-color: #ff0000; }
a:hover { -webkit-animation: test 1s 1 ease forwards }
Note that specifying start color in 0% keyframe and end color in :hover was not necessary.
Of course, this code is Webkit specific. I haven't tried in other browsers with other vendor prefixes or with the general "animation" property.
put your end values in the main css class and the start values in the animation keyframes at 0%:
#keyframes test {
0% {
background-color: #ff0000; /* start value */
}
100% {
background-color: #0000ff;
}
}
a {
background-color: #ff0000; /* normal state */
}
a:hover {
animation-name: test;
animation-duration: 1s;
background-color: #ff0000; /* final state, after animation is finished */
}
In case this question is still open, I don't think this is possible using CSS3 animations as they're currently specified:
An animation does not affect the computed value before the application of the animation, before the animation delay has expired, and after the end of the animation.
However, you should be able to use CSS3 transitions for basic effects. There's a slide in the html5rocks.com presentation that shows how to do this. Here's the relevant [paraphrased] excerpt:
#box.left { margin-left: 0; }
#box.right { margin-left: 1000px; }
#box { -webkit-transition: margin-left 1s ease-in-out; }
// Run this to animate to the left
document.getElementById('box').className = 'left';
// Run this to animate to the right
document.getElementById('box').className = 'right';
animation-fill-mode: forwards
The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing