12/23/2022 UPDATE: Looking for a one-and-done solution to make all your embedded Youtube videos on your kvCORE site mobile responsive? Get the code (but to understand why you need this, read below).
You’ve heard it time and time again… You MUST do video to be relevant in your market. I’ll add to that, you MUST do video THE RIGHT WAY to be relevant. While I’m not going to cover how to create video content here, I do want to address how to embed your YouTube videos the right way.
In my last post I covered the importance of testing your kvCORE/Kunversion website customizations on mobile to ensure everything looks as it should. This applies to your custom content pages, SEO area pages, anywhere you’ve added content, too. Some of you with embedded YouTube videos may have noticed that your videos are overflowing off the edge of the screen. Not good, right? Here’s the 20 second fix…
Wrap your iframe embed code in a parent element with the class embed-responsive and an aspect ratio. To ensure everything looks right on all browsers add class=”embed-responsive-item” to the iframe embed code itself.
If you don’t care about the different options and what happens behind the scenes use our Responsive kvCORE iFrame Embed Code Generator to get the properly formatted YouTube code. Just copy/paste your YouTube code into the text area, choose your desired aspect ratio, and viola! You get the properly formatted responsive video code.
If you want to create your code manually, or would like to see the various options, here you go:
Our raw YouTube embed code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/clJCUaTTsPg"frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Our wrapper and added class (in red):
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/clJCUaTTsPg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
</div>
The div wrappers for available screen ratios:
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Leave a Reply