Make YouTube Videos Responsinve: YouTube is the mostly used video sharing platform and there is not even a single website on the entire internet which does not have a YouTube video. So if you have ever share a YouTube video on your website or anywhere else then you must have also face the in issue where YouTube video is not responsive. And this issue is not possible to resolve for someone who does not have technical knowledge of HTML or CSS, but today I will give you a very easy solution which you can easily implement on your website in under 1 minute.
Table of Contents
Introduction: How to Make YouTube Videos Responsinve
YouTube is an essential platform for sharing and consuming video content. However, embedding YouTube videos on your website may not always result in a responsive design. In this tutorial, we’ll explore step-by-step instructions on how to make a YouTube player responsive using CSS. This will ensure that your embedded videos adapt gracefully to various screen sizes, providing an optimal viewing experience for your audience.
Prerequisites:
- Basic knowledge of HTML and CSS
- A code editor (e.g., Visual Studio Code, Sublime Text)
- An internet connection to access YouTube
Step 1: Create an HTML file
Open your preferred code editor and create a new HTML file. You can name it “index.html” or choose any other suitable name. Use the following basic HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive YouTube Player</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- YouTube video container -->
<div class="video-container">
<!-- Replace 'VIDEO_ID' with your actual YouTube video ID -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>Replace ‘VIDEO_ID’ in the iframe src attribute with the actual video ID you want to embed.
Step 2: Create a CSS file
Create a new CSS file named “styles.css” and link it in your HTML file. This file will contain the styles necessary for making the YouTube player responsive.
/* Reset some default styles */
body, html {
margin: 0;
padding: 0;
}
/* Set the width of the video container to 100% */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio for responsive scaling */
}
/* Style the embedded iframe */
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Step 3: Explanation of CSS styles
- The
.video-containerclass is used to create a container for the YouTube video. - The
position: relative;property ensures that the absolutely positioned iframe is relative to this container. - The
padding-bottom: 56.25%;property maintains a 16:9 aspect ratio for the video container. Adjust this value if you need a different aspect ratio. - The
position: absolute;property positions the embedded iframe absolutely within the container. - Setting both
widthandheightto100%ensures the iframe scales responsively within its container.
Complete Code with HTML & CSS
This is the complete code for demo purpose. You can copy this code and save it as HTML file and then double click to open it and you will be good to go. Your YoutTube video is now responsive across all devices and screen sizes. You can test it by shrinking the browser width and it will adapt to the screen size automatically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive YouTube Player</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- YouTube video container -->
<div class="video-container">
<!-- Replace 'VIDEO_ID' with your actual YouTube video ID -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>
</body>
<style>
/* Reset some default styles */
body, html {
margin: 0;
padding: 0;
}
/* Set the width of the video container to 100% */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio for responsive scaling */
}
/* Style the embedded iframe */
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</html>Step 4: Test the Responsive YouTube Player
Save your HTML and CSS files. Open the HTML file in a web browser to see the responsive YouTube player in action. The video should adapt to different screen sizes while maintaining its aspect ratio.
How to make youtube videos responsive With bootstrap Classes
Now ,if your site is made with bootstrap Framework or the page you have video on is using bootstrap then this section is for you. Making a YouTube video responsive in Bootstrap is a breeze, thanks to its built-in utility classes. Follow these steps to embed a responsive YouTube video in your Bootstrap-powered website:
Method: Using Bootstrap’s Embed Responsive Classes
- Log in to Your Bootstrap Project:
Open your Bootstrap project in a code editor. - Create or Open the HTML File:
Navigate to the HTML file where you want to embed the YouTube video. - Get the YouTube Video URL:
Go to the YouTube video you want to embed, and copy the video URL from the browser’s address bar. - Use Bootstrap Embed Responsive Classes:
ReplaceVIDEO_IDwith the actual video ID in the YouTube URL. Use the following Bootstrap classes to make the video responsive:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
</div>- The
embed-responsiveclass creates a responsive wrapper. - The
embed-responsive-16by9class sets the aspect ratio to 16:9 (common for videos). - The
embed-responsive-itemclass styles the iframe to fill the container.
- Replace VIDEO_ID:
ReplaceVIDEO_IDwith the actual video ID from the YouTube URL. - Preview or Deploy:
Save your HTML file and open it in a browser to see your responsive YouTube video in action.
That’s it! Bootstrap’s utility classes take care of the responsive magic, ensuring your video looks great on all screen sizes.
Custom Styling (Optional):
If you want more control over the styling, you can add custom CSS to your project:
/* Optional: Custom styling for a better fit */
.embed-responsive {
margin-bottom: 15px; /* Add some space between videos if needed */
}
/* Adjust the aspect ratio as needed */
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive-item {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}Feel free to tweak the styles according to your design preferences.
Congratulations! You’ve successfully embedded a responsive YouTube video in your Bootstrap project. Bootstrap’s utility classes make the process straightforward, allowing you to focus on creating an engaging user experience.
How to make youtube videos responsive in WordPress
Making a YouTube video responsive in WordPress is a common need, and fortunately, it can be achieved easily. Here’s a step-by-step guide to help you make YouTube videos responsive in WordPress:
Method 1: Using oEmbed (No Coding Required)
- Log in to Your WordPress Dashboard:
Access your WordPress admin panel. - Create or Edit a Post/Page:
Open the post or page where you want to embed the YouTube video or create a new one. - Copy YouTube Video URL:
Go to the YouTube video you want to embed, copy the URL from the browser’s address bar. - Paste URL in the Editor:
In your WordPress post/page editor, simply paste the YouTube URL on its own line. WordPress will automatically convert it into an embedded video. - Preview or Publish:
Preview your post/page or publish it. Your YouTube video should now be responsive by default.
Method 2: Using Responsive Embeds (For Advanced Users)
- Log in to Your WordPress Dashboard:
Access your WordPress admin panel. - Create or Edit a Post/Page:
Open the post or page where you want to embed the YouTube video or create a new one. - Switch to HTML Mode:
In the post/page editor, switch to the HTML mode. Look for the “Text” tab at the top right of the editor. - Get the YouTube Embed Code:
Go to the YouTube video, click on the “Share” button below the video, and then click on the “Embed” option. Copy the provided iframe code. - Insert the Embed Code:
In the HTML mode of your WordPress editor, paste the copied iframe code where you want the video to appear. - Make the Embed Code Responsive:
Add a custom class to the iframe element to make it responsive. Modify the iframe code like this:
<iframe class="responsive-youtube" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>- Apply CSS (Optional):
To ensure responsiveness, add the following CSS to your theme’s style.css file or the Additional CSS section in the WordPress Customizer:
.responsive-youtube {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio for responsive scaling */
}Feel free to adjust the padding-bottom value for a different aspect ratio.
- Preview or Publish:
Preview your post/page or publish it. Your YouTube video should now be responsive, adapting to various screen sizes.
Congratulations! You’ve successfully made your YouTube video responsive in WordPress. Choose the method that suits your comfort level, and enhance your website’s user experience.
Conclusion:
Congratulations! You’ve successfully created a responsive YouTube player using CSS. Feel free to integrate this solution into your website to provide an optimal viewing experience for your audience.
