A style attribute on a <video> tag assigns a unique style to the video control.
Its value is CSS that defines the appearance of the video element.
A style attribute on a <video> element.
<video class="video" controls
style="width:300px; height:240px; outline:none;
border: 5px solid #45c9d0; padding: 10px;">
<source src="/media/movie.mp4" type="video/mp4">
<source src="/media/movie.ogg" type="video/ogg">
</video>
The style attribute specifies the style, i.e. look and feel, of the <video> element.
A style contains any number of CSS property/value pairs, separated by semicolons (;).
The style attribute overrides any other style that was defined in a <style> tag or an external CSS file.
This inline styling affects the current <video> element only.
<video style="CSS-styles">
| Value | Description |
|---|---|
| CSS-styles | One or more CSS property/value pairs separated by semicolons (;). |
A style attribute on a <video> element.
Clicking the button toggles the video size.
<video id="myvideo" controls
style="width: 320px; height: 240px; outline: none;">
<source src="/media/movie.mp4" type="video/mp4">
<source src="/media/movie.ogg" type="video/ogg">
</video>
<br/><br/>
<button onclick="toggle();">Toggle class</button>
<script>
let toggle = () => {
let element = document.getElementById("myvideo");
if (element.style.width === "320px") {
element.style.width = "480px";
element.style.height = "360px";
} else {
element.style.width = "320px";
element.style.height = "240px";
}
}
</script>
The style attribute assigns width and height to the <video>.
Clicking the button calls JavaScript which changes the element width and height.
Here is when style support started for each browser:
 Chrome
|
4.0 | Jan 2010 |
 Firefox
|
3.5 | Jun 2009 |
 IE/Edge
|
9.0 | Sep 2012 |
 Opera
|
10.5 | Mar 2010 |
 Safari
|
4.0 | Jun 2009 |
Back to <video>
