<h1>Media Chrome - Animated Icons Example</h1>
<style>
:not(:defined) {
display: none;
}
media-controller:not([audio]) {
display: block;
max-width: 640px;
aspect-ratio: 2.4;
--media-range-track-height: 6px;
--media-range-track-border-radius: 9999px;
--media-range-thumb-opacity: 0;
}
video {
width: 100%;
}
media-volume-range[mediavolumeunavailable],
media-airplay-button[mediaairplayunavailable],
media-fullscreen-button[mediafullscreenunavailable],
media-cast-button[mediacastunavailable],
media-pip-button[mediapipunavailable] {
display: none;
}
:is(media-time-range, media-volume-range)::part(appearance) {
transition: all .15s ease-out;
}
:is(media-time-range, media-volume-range)[dragging]::part(appearance) {
height: calc(var(--media-range-track-height) + 4px);
width: calc(100% + 6px);
transform: translate(-3px, 0);
}
media-volume-range:not([dragging]) {
--media-range-track-transition: width .15s ease-out;
}
media-time-range:not([dragging]):active {
--media-range-track-transition: width .15s ease-out;
}
media-play-button {
width: 42px;
}
.play-icon {
margin-inline: 3px;
width: 0;
height: 16px;
border-style: double;
border-width: 0 0 0 16px;
border-color: transparent transparent transparent currentColor;
transition: all .15s ease-out;
}
media-play-button[mediapaused] .play-icon {
border-style: solid;
border-width: 9px 0 9px 16px;
}
media-mute-button #icon-muted,
media-mute-button #icon-volume {
display: none;
}
media-mute-button[mediavolumelevel="off"] #icon-muted {
display: block;
}
media-mute-button:not([mediavolumelevel="off"]) #icon-volume {
display: block;
}
:is(.volume-low, .volume-medium, .volume-high) {
opacity: 1;
transition: opacity .5s;
}
media-mute-button[mediavolumelevel="off"] :is(.volume-low, .volume-medium, .volume-high),
media-mute-button[mediavolumelevel="low"] :is(.volume-medium, .volume-high),
media-mute-button[mediavolumelevel="medium"] :is(.volume-high) {
opacity: .2;
}
#icon-muted-slash {
transition: clip-path .15s ease-out;
clip-path: inset(0 0 100% 0);
}
media-mute-button[mediavolumelevel="off"] #icon-muted-slash {
clip-path: inset(0);
}
@keyframes bass-bounce {
0% { opacity: 0; translate: 0; }
50% { opacity: 1; translate: 1px; }
100% { opacity: 1; translate: 0; }
}
media-mute-button:not([mediavolumelevel="off"]) .volume-low {
animation: .35s bass-bounce cubic-bezier(.34, 1.56, .64, 1);
}
media-mute-button:is([mediavolumelevel="medium"], [mediavolumelevel="high"]) .volume-medium {
animation: .35s .04s bass-bounce cubic-bezier(.34, 1.56, .64, 1);
}
media-mute-button[mediavolumelevel="high"] .volume-high {
animation: .35s .08s bass-bounce cubic-bezier(.34, 1.56, .64, 1);
}
media-fullscreen-button path {
transition: transform .15s cubic-bezier(.175, .885, .32, 1.275);
}
media-fullscreen-button[mediaisfullscreen] .top-left {
transform: translate(54%, 54%);
}
media-fullscreen-button[mediaisfullscreen] .top-right {
transform: translate(-54%, 54%);
}
media-fullscreen-button[mediaisfullscreen] .bottom-right {
transform: translate(-54%, -54%);
}
media-fullscreen-button[mediaisfullscreen] .bottom-left {
transform: translate(54%, -54%);
}
@property --fs-icon-offset {
syntax: '<percentage>';
initial-value: 0%;
inherits: false;
}
@keyframes offset-bounce {
0% { --fs-icon-offset: 0%; }
50% { --fs-icon-offset: 5%; }
100% { --fs-icon-offset: 0%; }
}
media-fullscreen-button:hover path {
animation: .35s offset-bounce cubic-bezier(.34, 1.56, .64, 1);
}
media-fullscreen-button:hover .top-left {
translate: calc(-1 * var(--fs-icon-offset)) calc(-1 * var(--fs-icon-offset));
}
media-fullscreen-button:hover .top-right {
translate: var(--fs-icon-offset) calc(-1 * var(--fs-icon-offset));
}
media-fullscreen-button:hover .bottom-right {
translate: var(--fs-icon-offset) var(--fs-icon-offset);
}
media-fullscreen-button:hover .bottom-left {
translate: calc(-1 * var(--fs-icon-offset)) var(--fs-icon-offset);
}
</style>
<media-controller>
<video slot="media" src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4" muted="" crossorigin="" playsinline="">
<track default="" kind="metadata" label="thumbnails" src="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/storyboard.vtt">
</video>
<media-control-bar>
<media-play-button mediapaused="">
<span slot="icon" aria-hidden="true" class="play-icon"></span>
</media-play-button>
<media-mute-button mediavolumelevel="off">
<svg slot="icon" aria-hidden="true" viewBox="0 0 24 24">
<path id="icon-muted-slash" d="M3 2.69434 20.5607 20.255 19.5 21.3157 1.93934 3.755 3 2.69434Z"></path>
<g id="icon-muted">
<path id="icon-muted-speaker-small" d="M8.55 6.13531 12 3.38v6.20484L8.55 6.13531Z"></path>
<path id="icon-muted-speaker-big" d="M1.5 15.7503V8.25969h2.83453L12 15.9252V20.63l-6.11016-4.8797H1.5Z"></path>
<path class="volume-low" d="M16.5 12.005c0-1.1512-.2723-2.24437-.832-3.34078l-.3399-.66844-1.3368.6811.3407.66796c.4496.88176.668 1.75176.668 2.66016-.0003.1838-.0101.3675-.0295.5503l1.2806 1.2806c.1638-.5965.2475-1.2122.2489-1.8309Zm0 0c0-1.1512-.2723-2.24437-.832-3.34078l-.3399-.66844-1.3368.6811.3407.66796c.4496.88176.668 1.75176.668 2.66016-.0003.1838-.0101.3675-.0295.5503l1.2806 1.2806c.1638-.5965.2475-1.2122.2489-1.8309Z"></path>
<path class="volume-medium" d="M17.8978 6.37719C18.8869 8.07266 19.5 9.60547 19.5 12.005c0 1.7072-.3192 2.985-.8672 4.2113l-1.1484-1.149c.3333-.8962.5156-1.8468.5156-3.0623 0-2.07047-.5123-3.35437-1.3978-4.87219l-.3778-.64781 1.2956-.75562.3778.64781Z"></path>
<path class="volume-high" d="M22.5 12.005c0-3.48094-.9464-5.67703-2.3677-7.90359l-.4035-.63235-1.2657.80719.4036.63234C20.1478 6.91344 21 8.88781 21 12.005c0 2.2856-.4406 3.9375-1.1634 5.4164l1.1109 1.1109C22.0388 16.4764 22.5 14.4894 22.5 12.005Zm0 0c0-3.48094-.9464-5.67703-2.3677-7.90359l-.4035-.63235-1.2657.80719M22.5 12.005c0-3.48094-.9464-5.67703-2.3677-7.90359l-.4035-.63235-1.2657.80719.4036.63234C20.1478 6.91344 21 8.88781 21 12.005c0 2.2856-.4406 3.9375-1.1634 5.4164"></path>
</g>
<g id="icon-volume">
<path class="volume-low" d="m15.3268 7.99094.3411.66793C16.1822 9.66585 16.5 10.7636 16.5 12c0 1.2241-.3314 2.3449-.8299 3.3368l-.3368.6701-1.3402-.6736.3368-.6701C14.7445 13.8382 15 12.9471 15 12c0-.9648-.2447-1.8302-.6679-2.65887l-.3412-.66793 1.3359-.68226Z"></path>
<path class="volume-medium" d="m17.5196 5.72417.3781.64772C18.8818 8.05755 19.5 9.58453 19.5 12c0 2.4191-.6451 3.9614-1.5996 5.6235l-.3735.6504-1.3008-.747.3735-.6504C17.4713 15.3586 18 14.0753 18 12c0-2.0789-.5068-3.34567-1.3977-4.87189l-.3781-.64771 1.2954-.75623Z"></path>
<path class="volume-high" d="m19.7287 3.46428.4035.63219C21.5988 6.39414 22.5 8.61481 22.5 12c0 3.3817-.899 5.6514-2.3718 7.9097l-.4097.6282-1.2564-.8194.4097-.6282C20.2115 17.0361 21 15.0467 21 12c0-3.04324-.7863-4.98789-2.1322-7.09647l-.4035-.6322 1.2644-.80705Z"></path>
<path id="icon-volume-speaker" d="M5.88984 8.25469H1.5v7.49061h4.38984L12 20.625V3.375L5.88984 8.25469Z"></path>
</g>
</svg>
</media-mute-button>
<media-volume-range></media-volume-range>
<media-time-range></media-time-range>
<media-time-display showduration=""></media-time-display>
<media-fullscreen-button>
<svg slot="icon" aria-hidden="true" viewBox="8 8 20 20">
<path d="M10 16h2v-4h4v-2h-6v6z" class="top-left"></path>
<path d="M20 10v2h4v4h2v-6h-6z" class="top-right"></path>
<path d="M24 24h-4v2h6v-6h-2v4z" class="bottom-right"></path>
<path d="M12 20h-2v6h6v-2h-4v-4z" class="bottom-left"></path>
</svg>
</media-fullscreen-button>
</media-control-bar>
</media-controller>