AUTOMATIC Mobile Responsive Embedded Youtube Videos For Your kvCORE Site

You may have seen our previous post on How To: Embed YouTube Videos In Kvcore Custom Pages The Right Way, and our follow-up post with our Kvcore Responsive iFrame Embed Code Generator tool… Well today, after popular demand, we are releasing a one-and-done code that will make ALL your embedded Youtube videos on your kvCORE site mobile responsive!

Here is how it works…

Step 1:

Copy/paste the following code into your “Custom Footer” setting in “Web & IDX” -> “Website Manager” -> “Edit Settings”

<!--RESPONSIVE YOUTUBE EMBEDS-->
<script>
document.addEventListener("DOMContentLoaded", function () {
  $('iframe[src*="youtube.com"]').each(function( index ) {
    if ( !$(this).parent().parent().hasClass('bee-video') &&   !$(this).hasClass('embed-responsive-item','background_screen') ) {
      $(this).addClass('embed-responsive-item').wrap('<div class="embed-responsive embed-responsive-16by9"></div>');
    }
  });
});
</script>

Step 2:

Hit Save.

That’s It!!!

This code does all the magic behind the scenes, adding the proper styling and wrapper classes to the Youtube iframe automatically as the video is loaded. What’s better, even if you’ve previously used our embed code generator and already have properly formatted responsive Youtube videos on your kvCORE site, this script will not disrupt those. If you’ve previously embedded Youtube videos and just changed the defined width attribute to “100%”, this script will still work.

And for those of you who are thinking about purchasing one of our Customized Home Page Designs, effective 12/23/2022, we’re including this is all of our base code designs.