Embed responsive youtube video: Are you wonder how to embed a YouTube video on your site and have it responsive, so that it scales down on a mobile device? Then, this page is the best choice. Here, we have shared the explanation about Responsive YouTube Video Embeds with Flexbox in HTML & CSS example codes. Look at this tutorial and make use of the code at the required time.
- Embed Responsive YouTube Videos with Tailwind CSS
- Responsive Youtube Video Embeds with Flexbox
- Responsive YouTube Video Embeds
Embed Responsive YouTube Videos with Tailwind CSS
Embedding YouTube videos into your responsive website may be trouble. iframes are used by YouTube for their embeds and these iFrames require a fixed width and height specified. This is distant from ideal for responsive websites.
And Certainly, even in 2021 YouTube doesn’t provide a method to inevitably resize and scale their embeds, why don’t we take a glance at how we can fix this with Tailwind CSS.
The Aspect Ratio Plugin
May by you don’t have any idea about this but there is a way that you can extend Tailwind’s basic functionality with plugins. Simply install the wanted plugin with npm and insert it in your tailwind.config.js file. Make use of this official @tailwindcss/aspect-ratio plugin and do your YouTube embeds too.
npm install @tailwindcss/aspect-ratio@latest --save-dev
Afterward, enter it in our tailwind.config.js file.
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/aspect-ratio'),
// ...
],
}
The above code, provide us a whole set of aspect ratio width and height classes to work with. By default, there are 16 generated aspect-ratio classes. In case those 16 utility classes are not enough for you, you can always extend them.
Default aspect-ratio classes
| Width | Height |
|---|---|
aspect-w-1 |
aspect-h-1 |
aspect-w-2 |
aspect-h-2 |
aspect-w-3 |
aspect-h-3 |
aspect-w-4 |
aspect-h-4 |
aspect-w-5 |
aspect-h-5 |
aspect-w-6 |
aspect-h-6 |
aspect-w-7 |
aspect-h-7 |
aspect-w-8 |
aspect-h-8 |
aspect-w-9 |
aspect-h-9 |
aspect-w-10 |
aspect-h-10 |
aspect-w-11 |
aspect-h-11 |
aspect-w-12 |
aspect-h-12 |
aspect-w-13 |
aspect-h-13 |
aspect-w-14 |
aspect-h-14 |
aspect-w-15 |
aspect-h-15 |
aspect-w-16 |
aspect-h-16 |
Responsive Youtube Video Embeds with Flexbox
HTML Code:
<div class="video-media-youtube">
<ul class="video__container">
<li class="video__content">
<h2>Twin Souls</h2>
<ul class="video-media-youtube-inner">
<li class="media__embed">
<h3>Twin Souls - Autori - sesja poświęcona Miłości Absolutnej</h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/6iHarkg-SkM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</li>
<li class="media__embed">
<h3>Twin Souls - Autori - Medytacji Miłości Płomieni </h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/L96UCc0RmdQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</li>
</ul>
</li>
<li class="video__content">
<h2>Świadomość</h2>
<ul class="video-media-youtube-inner">
<li class="media__embed">
<h3>Siła spokoju</h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/63_lwapPTTY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</li>
<li class="media__embed">
<h3>David Hawkins</h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/OnQc_GOa57Q?list=PLU6k1z0ryVkqISAOtWMUXm06ez3DmwU_l" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
</div>
</li>
</ul>
</li>
<li class="video__content">
<h2>Ciąg Fibonacciego</h2>
<ul class="video-media-youtube-inner">
<li class="media__embed">
<h3>Złota liczba. Boska proporcja</h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/wb7kPaM8cfg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</li>
<li class="media__embed">
<h3>W naturze ...</h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/M16GINf8A50" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</li>
</ul>
</li>
<li class="video__content">
<h2>Medytacje video</h2>
<ul class="video-media-youtube-inner">
<li class="media__embed">
<h3>Zen Meditation Video Warm Japanese Pond</h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/Zawg8nmUpaw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</li>
<li class="media__embed">
<h3>Sunrise Meditation Video Stunning Colours Mt Fuji</h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/9eRx_XowP1I" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</li>
<li class="media__embed">
<h3>The Light of The Soul</h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/-3bMgp11HGo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</li>
<li class="media__embed">
<h3>Ho'oponopono medytacja</h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/2psxMTlFvlA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</li>
</ul>
</li>
<li class="video__content">
<h2>Święta geometria</h2>
<ul class="video-media-youtube-inner">
<li class="media__embed">
<h3>Boska matematyka</h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/xjCBC-d3kdg?list=PLx9elHolWWO8QVH3EBr3xvyo2sefhocZz" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</li>
<li class="media__embed">
<h3>Wszechświat</h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/X97qVGsOW1Q" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</li>
</ul>
</li>
<li class="video__content">
<h2>Gregg Braden - Przestrzeń Serca</h2>
<ul class="video-media-youtube-inner">
<li class="media__embed">
<h3>Inteligencja i Moc naszych Serc</h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/dw20FTLS8GI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</li>
<li class="media__embed">
<h3>Serce ma mózg</h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/rZ2qrgdzkJ4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</li>
<li class="media__embed">
<h3>Globalna Inicjatywa Koherencji</h3>
<div class="video-media-youtube-inner-vi video-media-youtube-inner-vi--ratio">
<iframe src="https://www.youtube.com/embed/pa0ML4w87yc?list=PLeYr3xi_RH075sYcxIdi1l7-vhK7IugRK" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</li>
</ul>
</li>
</ul>
</div>
CSS Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
li {
list-style: none;
}
.video-media-youtube {
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
.video__container {
display: flex;
flex-direction: column;
width: 100%;
padding: 0 .9375rem;
}
.video__content {
padding-bottom: 1.25rem;
}
h2 {
width: 100%;
text-transform: uppercase;
}
h3::before {
content: "\f111";
display: inline-block;
font-family: 'Font Awesome 5 Free';
font-size: .375rem;
font-weight: 900;
vertical-align: middle;
transform: translateY(-.125rem);
padding-right: .9375rem;
}
h3 {
display: inline-block;
padding: 20px 0;
}
.video-media-youtube-inner {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.media__embed {
flex-basis: 100%;
padding-bottom: 1.25rem;
}
.video-media-youtube-inner-vi {
display: block;
overflow: hidden;
position: relative;
height: 0;
padding: 0;
}
.video-media-youtube-inner-vi--ratio {
padding-bottom: 75%;
}
.video-media-youtube-inner-vi iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
@media only screen and (min-width: 1024px) {
.video__container {
padding: 0 1.25rem;
}
.video-media-youtube-inner {
justify-content: space-between;
}
.media__embed {
flex-basis: calc(50% - .9375rem);
padding-bottom: 1.875rem;
}
}
Responsive YouTube Video Embeds
The problem with embedding YouTube videos is that they are an iframe and iframes need to be given an exact height and width otherwise they will look funky.
And we need to keep the proportions, based on the video aspect ratio.
To have a YouTube video be displayed responsive in your page, first wrap it into a container div:
<div class="video-container"> <iframe src="https://www.youtube.com/embed/klZNNUz4wPQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
.video-container {
overflow: hidden;
position: relative;
width:100%;
}
.video-container::after {
padding-top: 56.25%;
display: block;
content: '';
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Calculating aspect ratios
See that magic number, 56.25%? That’s needed as padding when the aspect ratio of a video is 16:9. (9 is 56.25% of 16).
If your video is 4:3 for example, set it to 75%.