The video Element and Aspect Ratio
Embed video and maintain correct aspect ratios.
The video Element and Aspect Ratio is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The video Element
The <video> element embeds video natively:
<video controls width="800" height="450" src="tutorial.mp4">
Your browser does not support video.
</video>Essential Attributes
Important video attributes:
<video
src="demo.mp4"
controls <!-- show player UI -->
width="1280" <!-- intrinsic width -->
height="720" <!-- intrinsic height -->
poster="preview.jpg" <!-- thumbnail before play -->
preload="metadata" <!-- preload only metadata -->
>
Your browser does not support video.
</video>The poster Attribute
The poster attribute sets a thumbnail shown before the video plays:
<video controls poster="/thumbnails/episode-42.jpg" width="800" height="450">
<source src="episode-42.mp4" type="video/mp4">
</video>
<!-- Without poster: browser shows a black frame
or the first frame of the video (browser-dependent) -->Width and Height for Aspect Ratio
Always specify width and height to prevent layout shift:
<video controls width="1280" height="720" src="video.mp4"></video>
<!-- Browser reserves correct space before video loads -->
<!-- Prevents CLS (Cumulative Layout Shift) -->
<!-- Make responsive with CSS:
video { width: 100%; height: auto; }
-->Responsive Video CSS
Make video responsive with CSS:
video {
width: 100%;
height: auto;
max-width: 1280px;
display: block;
margin: 0 auto;
}
/* Aspect ratio box: */
.video-wrapper {
position: relative;
padding-top: 56.25%; /* 16:9 aspect ratio: 9/16 = 0.5625 */
}
.video-wrapper video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}CSS aspect-ratio Property
Modern approach using CSS aspect-ratio:
video {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
}
/* Other common ratios: */
/* 4:3 → aspect-ratio: 4 / 3 */
/* 21:9 → aspect-ratio: 21 / 9 */
/* 1:1 → aspect-ratio: 1 */Video Playback Controls via JS
JavaScript video control:
const video = document.getElementById('my-video');
video.play();
video.pause();
video.currentTime = 60; // jump to 1 minute
video.playbackRate = 1.5; // 1.5x speed
video.volume = 0.7;
video.muted = true;
video.requestFullscreen();
console.log(video.duration); // total length
console.log(video.paused); // is it paused?Video Events
Listen to video events:
video.addEventListener('play', () => updatePlayButton());
video.addEventListener('pause', () => updatePlayButton());
video.addEventListener('ended', () => showNextVideo());
video.addEventListener('timeupdate', () => updateProgressBar());
video.addEventListener('loadedmetadata', () => {
console.log('Duration:', video.duration);
console.log('Dimensions:', video.videoWidth, 'x', video.videoHeight);
});Fullscreen API
Enter and exit fullscreen programmatically:
const btn = document.getElementById('fullscreen-btn');
const video = document.getElementById('player');
btn.addEventListener('click', () => {
if (!document.fullscreenElement) {
video.requestFullscreen();
} else {
document.exitFullscreen();
}
});
document.addEventListener('fullscreenchange', () => {
btn.textContent = document.fullscreenElement ? 'Exit Fullscreen' : 'Fullscreen';
});Video Autoplay Policy
Browser autoplay rules for video:
- Muted video → can autoplay in all modern browsers
- Unmuted video → blocked unless user has interacted with the page
- Google's Media Engagement Index → frequent visitors may be allowed autoplay
- Always provide a play button as a fallback
Accessibility for Video
Accessibility requirements for video:
- Provide captions for all dialogue and important sounds
- Provide a transcript for deaf/hard-of-hearing users
- Provide audio descriptions for blind users (describe visual-only information)
- Ensure keyboard controls work (native controls do)
Quick Check
Which video attribute shows a static image before the video plays?
Recap: video Element
Video element essentials:
controls— show player UIwidthandheight— prevent layout shiftposter— thumbnail before playpreload="metadata"— good performance default- Responsive:
width: 100%; height: auto;oraspect-ratio: 16/9 - Muted video can autoplay; unmuted cannot in most browsers
Frequently asked questions
Is the “The video Element and Aspect Ratio” lesson free?
Yes — the full text of “The video Element and Aspect Ratio” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “The video Element and Aspect Ratio”?
Embed video and maintain correct aspect ratios. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “The video Element and Aspect Ratio” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The audio Element src controls loop autoplay
- The video Element and Aspect Ratio
- The source Element for Multiple Formats
- Subtitles with track and WebVTT