Hello I am tired of the boring looking Google Chrome native html5 video player design.
It's getting worse with every time they change it.
Right now it's in a bright white which is completely unsatisfying when you ask me.
So I decided to create a little userstyle to make it dark.
This is how far I came but it's not possible for me to change the color of the little circle.
Any help is welcome.
This is my actual progress:
video::-webkit-media-controls-panel {
background-color: #161618;
}
video::-webkit-media-controls-volume-slider-container {
background-color: cyan;
}
video::-webkit-media-controls-volume-slider {
background-color: #1FB2B0;
}
video::-webkit-media-controls-timeline {
background-color: #1FB2B0;
}
Here is the jsfiddle link for it.
https://jsfiddle.net/cyc1j0nv/7/
I eventually got where I wanted to go (more or less) by applying a filter to the media controls as a whole. Of course, one could also apply filters to each pseudo-element of the controls individually.
video::-webkit-media-controls{
filter: hue-rotate(180deg) brightness(0.9);
}
<h1>Styling video controls</h1>
<video controls src="https://a.desu.sh/zflbzy.webm"><</video>
*Note: it's up to the user to add vendor-prefixes to the CSS as required
There isn't any CSS style to change the little blue circles in the same sense as your example; they're images that are packaged into chrome. Maybe one of the css3 image filter properties would work.
There's also a small caveat to overriding these styles in general: they are internal to chrome, and are subject to change at any time. Pages that depend on them might find that they simply don't work the same way in some future version of chrome.
If you'd like media controls with a custom look on your page, then you might want to take a look at the many javascript media players that give you quite a bit more flexibility. They also work across different browsers.
I succeeded in positioning the controls in a way without overlay the original video screen by:
video::-webkit-media-controls-enclosure {
overflow:hidden;
position: absolute;
bottom:-32px
}
video::-webkit-media-controls-panel {
display: flex !important;
opacity: 1 !important;
}
hide download button by adding:
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}
Related
I'd like to give broken/errored images some extra CSS:
img:error {
max-width: 20px;
max-height: 20px;
}
but that doesn't work. Is there a way with pure CSS to do this? Is there an img pseudo selector for this? Or even better: a dirty hack that works?
I've looked around, but nobody seems to be wondering =)
(Yes, I know JS can do it and I know how; no need to mention it.)
There is no way in CSS specs or drafts, but Firefox has a proprietary selector (pseudo-class) :-moz-broken. Its documentation is very concise and it says “intended for use mainly by theme developers”, but it can be used e.g. as follows:
:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }
Although the documentation says that it “matches elements representing broken image links”, it actually matches broken images (an img element where the src attribute does not refer to an image), whether they are links or not. Presumably, “links” really means “references” here.
CSS 2.1 says: “This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” But Selectors Level 3 (CSS3 Selectors) just says about them: “They are explained in CSS 2.1.” In practice, browsers handle them differently. Oddly enough, Firefox supports :-moz-broken:after but ignores :-moz-broken:before. It does not support either of these pseudo-elements for normal images, but img:after, too, is supported for a broken image (i.e., the specified content appears after the alt attribute value).
For this, you should use the alt attribute, wich shows up if link is broken and you can as well style background of image :
example:
img {
display:inline-block;
vertical-align:top;
min-height:50px;
min-width:300px;
line-height:50px;
text-align:center;
background:
linear-gradient(to bottom,
blue,
orange,
green);
font-size:2em;
box-shadow:inset 0 0 0 3px;
}
These style will be hidden when image is shown.
http://codepen.io/anon/pen/Kxipq
As you can see, we do not check for broken links, but offer alternative , usefull for blind people , searchengines, whatever , and some extra styles finishes it :)
some extra Image alt attribute best practices
<img src="not_found_image.png" onerror='this.style.display = "none"' />
from:
https://www.geeksforgeeks.org/how-to-hide-image-not-found-icon-when-source-image-is-not-found/
NO there is no :error pseudo class. This is a good site for a comprehensive list of what is available:
http://reference.sitepoint.com/css/css3psuedoclasses
July, 2015 EDIT/ADDITION:
(Thank you Rudie)
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
No. There is nothing in CSS selectors level 2.1 or level 3 that allows targeting an image like that.
This is close:
<style>
img[data-broken="true"] {
visibility: hidden;
}
</style>
<img src="none.webp" onerror="this.setAttribute('data-broken', 'true')">
Strictly speaking, it sill uses JavaScript. But the JS is self contained in the image HTML code.
I have a number of divs covering a different portions of a menu on a background image on a webpage.
Within the div I hav an a href to link to another page a play a click sound
I've used a CSS trick to fill the div so that the cursor changes right across the div. See the code below
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
<div id="apWelcome">
</div>
The CSS for apWelcome and to fill out the area is listed below:
#apWelcome {
cursor: pointer;
position: absolute;
left: 104px;
top: 216px;
width: 49px;
height: 66px;
}
a.fill-div {
cursor: pointer;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
The problem is that in FF24 the click behaviour is fine but nor sound, Chrome - half-works (sound plays)- visually the page jumps down, IE does not display cursor or has no functionality.
Anyone know a workaround for this for all three browswers or a completely different method. Thank you.
read this article about sounds in html (cross browser).
the different browsers allows differnent types of sounds files.
also, you dont have to use your div as placeHolder for the a tag, you can directly call your function from the div's onclick (with cursor:poiner; you wont notice any difference)
See this Fiddle, a complete solution: http://jsfiddle.net/avrahamcool/ybxBq/
I've rebuilt the entire layout from scratch.
you can download it from here (I will keep the link alive for a week)
I dont know if it was necessary, but.. it was easier for me.
I'm using an img in BackgroundContainer and not CSS background, that way: if someone prints the page, he still sees the background.
I'm using fixed height&width for the 'Site', but all of its content is in %. so it should scale beautifully if the size of the site change.
for testing in IE, you have to run the HTML from a server (and not from the local file) - so the browser wont stop the script
I've deleted almost all your scripts, so put them back (one by one, each time make sure the page is still working in all browsers)
NOTICE that I've change some of your classes & files name, so check your scripts and CSS's accordingly (also, I rearranged the Image folder).
tested on IE10, FF, Chrome
notice the url(dummy) as background-image for the clickable elements.
good luck.
I'm working on this site: http://stdionis.org.uk/
When the site is viewed in IE 9 or below, the drop down menus on the home page appear underneath the slideshow (It's a google slideshow), however when you go to another page, the drop-downs appear on top of images.
I've set the z-index of the drop-down div to 9999, and I've tried setting the z-index of the slideshow to zero, but I can't seem to make it work.
The CMS we are using doesn't directly allow access to the HTML code of the page (don't ask...) so I can only use CSS or javascript to make changes. Hence why i can't change the doctype to make it display in standards mode.
Not looking for a clean solution necessarily, any crazy javascript hacks would be much appreciated.
try this -
.t_horizontal * { z-index: 1000 !important; }
or
.t_horizontal table { z-index: 1000 !important; }
if even not working then - try using jQuery -
$(document).ready(function(){
$('.t_horizontal *').css('z-index','1000 !important');
});
NOTE: menu is using table which is not proper way to build menu.
Have you tried:
#ctlHeaderModules {
position: relative;
z-index: 2;
}
#frm1 {
position: relative;
z-index: 1;
}
Both of these two elements are on the same level and when I inspect them in Chrome I dont see any of these properties being applied, its worth a shot.
There is also this plugin: http://archive.plugins.jquery.com/project/TopZIndex
So, I have this animation that I want to run in the background of my website.
http://www.theartificialasylum.com/index3.html
I want to layer some divs over that animation containing images and texts etc. I have tried using z-index in the CSS file and different variations of uses of opacity to no avail.
Can anyone see where I am going wrong? this is the best I seem to be able to achieve: http://www.theartificialasylum.com/adex.html
Using Chrome's developer tools, I added some text to the 102 div, gave it a class of "lawl", and used only this stylesheet and was able to accomplish what it sounds like you wanted:
body{
background-color: #000000;
color: #fff;
}
#flashContent {
position:absolute;
top: 0;
left: 0;
}
.lawl {
background: #023;
opacity: .5;
}
I'm not sure what the problem was. Maybe it's your strict doctype. (I only use transitional myself.) Maybe it's because you were applying too many things to the html tag.
I do recommend cleaning up your code a bit, using more semantic IDs, putting test text in your divs, and paring it down so that you only test a few variables/lines of code at a time to achieve what you want.
Also, saving damn IE opacity fixes for last until after you have everything else done.
I am adapting a website in order to make it feel native on the iPad.
This website has navigation that shows a drop-down with the sub-navigation on hover.
This works like a charm on the iPad. When you touch it the subnav, it opens and closes again when you click/touch somewhere else.
Now i have the requirement to make it close again when the navigation point is touched again.
I was thinking, i could just set the pointer-events:none on hover & active for the iPad, but this makes the sub-navigation flicker and it does not work...
i have also tried to cover the navigation point with element set with the before selector and setting its pointer events to none, but this does not work...
Any idea, how i could solve this problem using CSS only. (I can not modify the HTML nor the JS)
PS: you can reproduce this on www.macprime.ch for example... (click the main navigation on the top, and try to close the dropdown again)
edit ok i tried almost everything that was possible with CSS only. I don't think its possible. If anyone can tell me why, he/she will get the bounty reward.
You could have a second transparent element that appears above the one you tapped. That way, when the user taps again, they will be selecting the other element and the first will lose its hover status:
<div class="blocker" onclick="void()"></div>
<div class="menuItem" onclick="void()"></div>
<style>
.blocker, .menuItem {
/* use the same position, width, height, etc */
}
.menuItem {
/* make it look pretty */
z-index: 100;
}
.blocker {
z-index: 99;
}
.menuItem:hover {
z-index: 98;
}
</style>
Of course, this will have a negative effect on the desktop, so you will want to do something like:
<style>
.blocker { display: none; }
.touchevents .blocker { display: block; }
</style>
<script>
if('ontouchstart' in document)
document.body.className += ' touchevents';
</script>
UPDATE Added onclick events to make them clickable.
You can see a working demo here: http://fiddle.jshell.net/vfkqS/6/
Unfortunately, I could not find a solution that does not require HTML or JavaScript changes, but I was able to keep them to a minimum.
You would need to make two non-CSS changes total:
Add a JavaScript mechanism for identifying if touch events are supported. See two line example above.
Add one div per menu which is clickable (onclick="void()") and has a unique identifier that can link it to the menu.
You may be able to do those two things with CSS but I'm not sure. Tablet detection would be a little sketchy in CSS and I don't think you can make something that sophisticated with a :before or :after pseudo-selector.
This is an interesting question and similar to one I've had come up recently. How do you marry a standard navigation dropdown that displays on hover with a touch event interface. Using the hover event as a trigger works really well on a desktop. In a world without hover events (tablets and smart phones), not so much.
In my case I landed on the idea of defining the behaviors: click/touch event would do the triggering, hover event would do subtle indications. For more details on this line of thinking see: http://www.markdotto.com/2012/02/27/bootstrap-explained-dropdowns/
For the issue you're trying to overcome I'm wondering if using #media queries in your CSS is a better solution...
#media (max-width: 979px) {
/*
New CSS declarations to show the sub navigation lists
in a more compact way that fits nicely on the iPad.
Something like...
*/
section.nav-overlay {
display: block;
height: 60px;
visibility: visible;
width: 979px; /* Or the max container width */
}
section.nav-overlay ul li {
float: left;
}
/*
Etc. etc. with the additional exceptions.
You get the idea.
*/
}
By doing this you would create more of a native interface on the iPad. However, if going this route is off the table, something like what Brian has above is better. Just wanted to give you an alternative.
Set pointer-events: none on the active state:
nav#mainnavi > ul > li > a:active {
pointer-events: none
}