Bootsrapmarkup~30 mins

Ratio utilities for embeds in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Ratio utilities for embeds

📖 Scenario: You want to embed a video on your webpage that looks good on all devices. To do this, you will use Bootstrap's ratio utilities to keep the video in a fixed aspect ratio, so it doesn't look stretched or squished.

🎯 Goal: Create a responsive embedded video using Bootstrap's ratio utilities with a 16:9 aspect ratio.

📋 What You'll Learn

Use a div with Bootstrap's ratio class to set the aspect ratio

Set the aspect ratio to 16:9 using the appropriate Bootstrap class

Embed a YouTube video inside the ratio container using an iframe

Make sure the iframe has the correct attributes for accessibility and responsiveness

💡 Why This Matters

🌍 Real World

Embedding videos and other media in a responsive way is common for blogs, tutorials, and marketing websites to ensure good viewing on all devices.

💼 Career

Knowing how to use Bootstrap's ratio utilities helps front-end developers create responsive layouts quickly and accessibly, a valuable skill in web development jobs.

Progress0 / 4 steps

Create the HTML skeleton with Bootstrap CSS link

Write the basic HTML5 structure with lang="en", meta charset="UTF-8", and viewport meta tag. Include the Bootstrap 5 CSS CDN link inside the <head>. Add an empty <body> section.

Bootsrap

Need a hint?

Remember to include the Bootstrap CSS link inside the <head> section for styling.

Add a container div with Bootstrap's ratio class for 16:9 aspect ratio

Inside the <body>, add a <div> with the classes ratio and ratio-16x9. This will create a container that keeps a 16:9 aspect ratio.

Bootsrap




  
  
  Bootstrap Ratio Embed

Need a hint?

Use both ratio and ratio-16x9 classes on the same div.

Embed a YouTube video inside the ratio container

Inside the div with classes ratio and ratio-16x9, add an iframe with src="https://www.youtube.com/embed/dQw4w9WgXcQ". Also add title="YouTube video player", allowfullscreen, and allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" attributes for accessibility and functionality.

Bootsrap




  
  
  Bootstrap Ratio Embed

Need a hint?

Make sure the iframe has all the required attributes for accessibility and functionality.

Add a heading and container for better structure and responsiveness

Above the div with the ratio classes, add a <main> element. Inside <main>, add a <div> with class container. Inside this container, add an <h1> with the text Responsive Video Embed. Move the ratio div inside this container below the heading.

Bootsrap




  
  
  Bootstrap Ratio Embed

Need a hint?

Use semantic <main> and Bootstrap's container class for better page structure and responsiveness.