Simple Responsive YouTube Video Embeds

YouTube has become very popular among all user groups in recent times. Be it informative, factual videos or the comedy and entertainment ones, we all are a huge fan of YouTube.

With the increasing popularity of YouTube videos, we often find ourselves looking to embed videos from YouTube in our webpage especially Web Designers, Developers and Bloggers.

YouTube provides us with an iframe for embedding the videos. The issue however comes in responsive view. This article provides the solution for the same.

The following two ways are provided to responsively embed videos in webpage :

• Without Using Bootstrap
• Using Bootstrap 4

 

Without Using Bootstrap

<style type="text/css">
.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%;
}
</style>


<div class="video-container">
  <iframe src="https://www.youtube.com/embed/o4bNPYfc-q0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Using Bootstrap 4

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vtDGTwxVkOA?rel=0" allowfullscreen></iframe>
</div>

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

We can easily customize the aspect ratios with class names.

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/TNJO4OtrME4?rel=0"></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/TNJO4OtrME4?rel=0"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/TNJO4OtrME4?rel=0"></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/TNJO4OtrME4?rel=0"></iframe>
</div>

Follow this video for complete guidance :