Facebook Pixel

Video Embedding

Videos are a great way to make your website more interactive and engaging. With CSS, you can easily customize the look and feel of videos—adjusting their size, shape, and even adding effects.

If you are not familiar with videos, follow the HTML Video tutorial.

Example: Embedding and Styling a Video

<body>
    <video controls>
        <source src="./Sigma Web Development Course.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</body>

style.css

video {
    width: 500px;
    height: 200px;
}

Output:

cwh tutorial image

Key Takeaways

  • The <video> element lets you embed videos directly in your webpage.
  • Using CSS, you can set width and height (in px, %, em, etc.) to control how the video appears.
  • You can combine video with other CSS properties (like border-radius, box-shadow, filters) to make it visually stand out.