• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

kvTemplates.com

Premium Custom Templates and Services For Kunversion and kvCORE-based Websites

  • Home
  • Shop
  • FAQ
  • Blog
  • Contact
  • Cart

Justin Hemker / April 23, 2019

How To: Embed YouTube Videos In Kvcore Custom Pages The Right Way

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.

YouTube Embed Code Generator

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>

How To: Embed YouTube Videos Into kvCORE The Right Way

Related posts:

Kvcore Responsive iFrame Embed Code Generator
Making the most of your Kunversion Custom Text Codes
How To: Hide The Sidebar On Your kvCORE Custom Pages
Not Seeing Your Updates: Flush The Cache

Filed Under: How To Tagged With: Custom Pages, Customization, Kunversion, Kvcore

Please Note: While we have extensive experience using Kunversion in the agent/broker capacity, we have no official relationship with, endorsement by, or affiliation with Inside Real Estate, Kvcore, or Kunversion+. We just thought you should know... ;)

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Subscribe to Our Know-How Newsletter

We keep your data private and only share your data with the third parties necessary to make this service possible.

Unsubscribe anytime.

ONE MORE STEP: Check your inbox or spam folder to confirm your subscription.

Recent Posts

  • How To: Prevent Facebook Customer Chat/ManyChat Chatbot From Covering Your Search Filters
  • Quick Customization: Make Your kvCORE Embeddable Home Valuation Widget Look Great
  • Now Available: New Hero Search Navigation Tabs
  • How To: Make Your kvCORE Testimonial Slider Automatically Slide
  • New Release: Contact Modal Widget Pro

Categories

  • Drip Campaigns
  • How To
  • Lead Management
  • Marketing
  • SEO
  • Uncategorized

Footer

Contact

919.264.8414
justin@kvTemplates.com

Justin Hemker
3000 Remington Oaks Cir
Cary, NC 27519

About

Founded by NC Licensed Broker, Justin Hemker, kvTemplate's mission is to provide customized homepage templates for real estate agents using the Kunversion lead generation platform.
Note: While we have extensive experience using the Kunversion platform in an agent/broker capacity, we are not affiliated with, nor are we endorsed by Inside Real Estate, Kvcore, or Kunversion.

Copyright © 2022 · Digital Pro on Genesis Framework · WordPress · Log in