The <video> and <audio> elements are just like other HTML elements, so CSS can be used for styling, including CSS transitions, animations, etc.
You can try this example online at JSBin.
To add some styling to the basic example we saw when we introduced the <audio> element, we just add a <figure> with two children: an <img> and a <figcaption>. Inside the <figcaption> we add the <audio> element from the previous example.
HTML source code:
<figure id="figaudio1">
<img id="imghorse" width="200"
src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Nokota_Horses.jpg"
alt = "a horse"/>
<figcaption id="figcptionaudio1"> Press Play to hear the horse!
<audio controls="controls">
<source src="https://mainline.i3s.unice.fr/mooc/horse.ogg"
type="audio/ogg" />
<source src="https://mainline.i3s.unice.fr/mooc/horse.mp3"
type="audio/mp3" />
Your browser does not support the audio element.
Download the audio/video in
<a href=”https://mainline.i3s.unice.fr/mooc/horse.ogg”>OGG</a>
or <a href=”https://mainline.i3s.unice.fr/mooc/horse.mp3”>MP3</a>
format.
</audio>
</figcaption>
</figure>
CSS source code:
#figaudio1 {
width : 420px;;
text-align:center;
padding : 6px;
background : white;
margin : 0 11px 0px 0;
border :solid 1px #888888;
border-radius : 8px ;
}
#figcptionaudio1 {
font-size : .8em;
padding : 6px 8px;
background : #dddddd;
display :block;
text-align :center;
font-family : georgia, serif;
font-style : italic;
border-radius : 7px ;
}
#figaudio1 > img {
background : #eeeeee;
padding : 5px;
border : solid 1px #444444;
}
/* For audio and img transitions/animation */
audio, #figaudio1 > img {
transition:all 0.5s;
}
#figaudio1 > img:hover {
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
transform: scale(1.05);
}
audio:hover, audio:focus, audio:active {
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
transform: scale(1.05);
Note that > means that the img must be directly under #figaudio1, with no other elements in between. For more info, see the Child combinators section of the Selectors Level 3 specification.
See this example online (where you can modify the code on the fly) or just play the following video, and move the mouse pointer in and out of the video while it's playing.
This example uses the pseudo CSS class :hover in order to track the mouseover event. On mouseover, it uses a CSS transition property that interpolates the changes in the scale and orientation of the video element (done using a transform CSS property).
The corresponding HTML source code is:
<video id="w3devCampusVideo" autoplay controls>
<source src=https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.webm
type=video/webm>
<source src=https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.ogg
type=video/ogg>
<source src=https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.mp4
type=video/mp4>
</video>
... and the CSS source code is as follows:
#w3devCampusVideo {
width: 300px;
transition: all 0.5s ease-in-out;
}
#w3devCampusVideo:hover {
width:400px;
transform:rotate(-5deg);
This is a trendy way of displaying videos.
Below you will find two examples that show how to do this trick. The first is for a "regular" video, using the <video> and <source> elements. This technique can also be used on any YouTube embedded videos (see Example #2 below).
The interesting part is that we use a 100% standard (and really small and simple) JavaScript piece of code here to handle the window resize events and we just set the regular CSS properties width and height of the video element, to resize the video.
Full width, resizable, borderless video, just using plain CSS and JS DOM events.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Full width video like PayPal site</title>
</head>
<body onload="init();">
<video id="myVideo" controls>
<source src=https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.webm type=video/webm>
<source src=https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.ogg type=video/ogg>
<source src=https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.mp4 type=video/mp4>
</video>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
overflow:hidden;
}
JavaScript:
var video;
function init() {
// function called when the page is loaded
video = document.querySelector("#myVideo");
// For initial value
video.width = window.innerWidth;
video.height = window.innerHeight;
// For dealing with window resize
window.onresize = function() {
video.width = window.innerWidth;
video.height = window.innerHeight;
};
}
Here is the HTML code. It's really simple, just notice the <body onload="init();"> which calls the JavaScript init() function right after the page is loaded.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Full width video like PayPal site</title>
</head>
<body onload="init();">
<video id="myVideo" autoplay>
<source
src=https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.webm
type=video/webm>
<source
src=https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.ogg
type=video/ogg>
<source
src=https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.mp4
type=video/mp4>
</video>
</body>
Here is the CSS (remove margins, remove padding, hide parts that could overflow from the <body>):
body {
margin:0;
padding:0;
overflow:hidden;
}
And now the JavaScript code:
var video;
function init() {
// function called when the page is loaded
video = document.querySelector("#myVideo");
// For initial value
video.width = window.innerWidth;
video.height = window.innerHeight;
// For dealing with window resize
window.onresize = function() {
video.width = window.innerWidth;
video.height = window.innerHeight;
};
}
Full width, resizable, borderless YouTube video. To do this: just 100% standard CSS + DOM manipulation using JavaScript.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example 2: Full width with a YouTube video</title>
</head>
<body onload="init();">
<iframe id="myVideo" width="560" height="315" src="https://www.youtube.com/embed/9X6e7uctAww" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
overflow:hidden;
}
JavaScript:
var video;
function init() {
// function called when the page is loaded
video = document.querySelector("#myVideo");
// For initial value
video.width = window.innerWidth;
video.height = window.innerHeight;
// For dealing with window resize
window.onresize = function() {
video.width = window.innerWidth;
video.height = window.innerHeight;
};
}
The CSS and JavaScript codes for this example are exactly the same as in Example #1.
(1) Let's use the video from the PayPal Web site, played full screen using only very simple CSS.
In this example, the video does not rescale; it's just cropped if the browser window is resized. Enlarge your browser and you'll see a man with a phone on the right. Resize your browser and you'll see only part of the video.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Full screen video</title>
</head>
<body>
<header>
<video style="width: 1457px; height: auto; visibility: visible;"
autoplay="autoplay"
muted="muted"
loop
poster="https://mainline.i3s.unice.fr/mooc/uk-brand-campaign.jpg">
<source src="https://mainline.i3s.unice.fr/mooc/uk-brand-campaign.mp4"
type="video/mp4">
<source src="https://mainline.i3s.unice.fr/mooc/uk-brand-campaign.webm"
type="video/webm">
</video>
</header>
<section>
<h1>Paypal video full screen using only CSS</h1>
</section>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
overflow:hidden;
}
video {
width:100%;
height:auto;
}
(2) Full screen video with CSS effects
This time the video is zoomed in so that it's much bigger than the browser's window. When we resize the browser, the part of the video that is visible adapts itself. It's not a "real resize" of the video. Try this example and read the explanation in this article by Dudley Storey.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Full screen video with CSS effects </title>
</head>
<body>
<header>
<video autoplay loop=""
poster="https://mainline.i3s.unice.fr/mooc/polina.jpg"
id="bgvid">
<source src="https://mainline.i3s.unice.fr/mooc/polina.webm"
type="video/webm">
<source src="https://mainline.i3s.unice.fr/mooc/polina.mp4"
type="video/mp4">
</video>
</header>
<section>
<h1>Full screen video with CSS effects</h1>
</section>
</body>
</html>
CSS code:
html, body{
color:white;
height: 100%;
}
header{
height: 100%;
background-image: url('https://mainline.i3s.unice.fr/mooc/dots.png'), url('#');
background-repeat: repeat, no-repeat;
background-size: auto, cover;
background-position: center center, top left;
font-family: sans-serif;
color: #051a00;
}
header video {
position:fixed;
top:50%;
left:50%;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index:-100;
transform:translateX(-50%) translateY(-50%);
}
The trick here is that:
the video is in the header, and the header has a plotted transparent background image ("dots.png") that is repeated in X and Y (see lines 8 and 9).
The video is positioned so that it's origin (top left corner) is away from the visible surface (line 25), while it is set to take 100% of the surface (lines 20 and 21).
Full screen video that resizes and keeps its ratio, using the viewport units.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Full screen video using the viewport units</title>
</head>
<body>
<video src="https://mainline.i3s.unice.fr/mooc/big_buck_bunny_1080p_stereo.ogg" controls></video>
</body>
</html>
CSS:
body {
margin: 0;
}
video {
position: absolute;
width: 100vw;
height: 100vh;
object-fit: cover;
object-position: center center;
}
This time we obtain the same result as with the first example that used JavaScript and a resize event. The video resizes correctly and keeps its ratio.
Let's use the same video to compare the different approaches again:
Original approach, using JavaScript. This solution works on any browser, so we will focus on the two following methods, based on pure CSS.
Using CSS 100% width and height properties (no JavaScript).
Using CSS viewport units for width and height (no JavaScript).
Resizing the browser window shows that #1 (JavaScript) and #3 (viewport units) behave in the same way: the width or height of the video always fills the window (whichever is smaller), and we always see the whole video.
Setting the video to 100% width and height results in different behavior:
100% means 100% of the size of the <body> element.
The body element's width is 100% of the browser window width, so the video is always full width.
The body element's height, however, is determined by the size of its children: the body tag's height grows and shrinks to accommodate the size of the children.
If the browser window is made wide and short, the video is full width, the height is taller than the window, and part of the video is not visible. It seems that just using % does not get us the same effect.