CSS Video Embedding

CSS helps to customize the visual effects of video. If you are not familiar with videos, follow the HTML Video tutorial.

Videos can be easily added to any webpage using the <video> tag. CSS lets you style them to control size, appearance, and layout just like images or other elements.

Basic Video Embedding

To embed a video:

				
					<!DOCTYPE html>
<html>
<head>
  <title>Video Example</title>
</head>
<body>
  <video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</body>
</html>

The controls attribute adds built-in video controls (play, pause, volume, etc.)
If the video format isn’t supported, fallback text appears: “Your browser does not support the video tag.

Styling the Video with CSS

You can change the size or layout of a video using CSS just like any block element.

Example with External CSS:

HTML File:

				
					<!DOCTYPE html>
<html>
<head>
  <title>Styled Video</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</body>
</html>

style.css File:

				
					video {
  width: 500px;
  height: 280px;
  border: 4px solid purple;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

Full Inline Example (No external CSS)

				
					<!DOCTYPE html>
<html>
<head>
  <title>Inline CSS Video</title>
  <style>
    video {
      width: 600px;
      height: 340px;
      border-radius: 10px;
      border: 3px solid #FF5733;
    }
  </style>
</head>
<body>
  <h2>Learn With Arshyan - CSS Video Styling</h2>
  <video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</body>
</html>

Responsive Video

Make your video adapt to all screen sizes:

				
					<style>
  video {
    max-width: 100%;
    height: auto;
  }
</style>