How to Embed YouTube Videos

How to Embed YouTube Videos

 In How to

In todays internet world, YouTube videos can be used for many different reasons. Most website and small business owners feel that its hard to get in YouTube for marketing, however, there are countless opportunities for creating video content. For example: if you are a manufacturer of garment, then perhaps you could create videos showing the process of your manufacturing of your garments and highlight the points of quality control.

Another example to use YouTube for marketing could be that if you are a personal fitness trainer, then you could start a serious of how to exercise programs. You could do comparison type of videos for your products, or, simple reviews. At the end of the day “simply start marketing on YouTube and carve your niche”.

Embedding YouTube Videos

Videos can provide better user experience and compliment your web page content, from YouTube can be accomplished as outlined in the below video tutorial by RankYa.

To make your videos responsive so that it resizes perfectly on mobile devices, wrap the <iframe> within another div and use this simple CSS code to style that div element.

.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Now your embedded videos will render perfectly responsive on any device whether mobile or desktop.

But hold on there, because there is actually a better way to embed YouTube videos if you are using a WordPress Content Management System, here’s the plugin I use on RankYa SEO Blog YouTube embeds (this plugin is now FREE) and will add Structured Data as well as fully responsive videos in WordPress built sites.

Recent Posts
Showing 6 comments
  • Robert Tanguay
    Reply

    Thanks, this pretty much works, but I am having an issue with the video overlapping the body image slightly on the right.

    Any thoughts?

    Thank you for your help.

    • RankYa
      Reply

      Hi Robert, you may have fixed that page because it looks okay from my end

  • Jose
    Reply

    Es español! Jejeje
    Muchas Gracias!
    Ge ha sido de mucha utilidad, gracias a ti mis videos en mi web son responsive
    Saludos!

  • Fabio
    Reply

    Hello!
    i have followed the instrunction of the video.
    In the iphone the responsive thing is good but it’s relative, because once you click you see the video with a dedicated reader. It’s like a page but itself.

    In the android phone the video is responsive but it’s not in the center of the screen, it’s on the right.
    Furthermore, if i turn the mobile, the video doesn’t change the size, i have to do it with my fingers.

    I don’t know if i’m asking too much…

    Fabio from Italy

    • RankYa
      Reply

      Hello Fabio, I understand what you are saying with embedding YouTube videos especially for mobile devices, however, at the moment, this technique seems to be best approach to make the videos responsive as they can be catering for many different devices. If you can find a better method, or if anyone reading this knows a better approach, then please comment.

Leave a Comment

0

Start typing and press Enter to search