How to Embed YouTube Videos

mobile SEO HTML5

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, embedding videos 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.

For example your embeded video details would look like this

<div class="video-container">iframe embed here</div> Then you simply use this CSS in your website theme style sheet .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.

What if the above code doesn’t work? Try this:

.video-container{ overflow: hidden; position: relative; width:100%; } .video-container::after { padding-top: 56.25%; display: block; content: ''; } .video-containeriframe, .video-container object, .video-container embed{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }

Don't let Google's latest Page Experience update derank your business website in search, instead, master Google rankings and website conversions with this Master Class Course by RankYa (Free Lessons Included)

Learn how press here

By RankYa

RankYa is a passionate digital marketer, website optimizer, content creator, and a fully qualified web developer helping businesses of all sizes (big or small) to achieve better results online. We are a reputable and registered Australian business serving valued clients worldwide since 2008, built on hard work, honesty and providing exceptional personalized service

We love sharing our passion through freely available how to videos and courses related to business website marketing and optimization, Google (Search Console, Ads, Analytics, YouTube), SEO, HTML5, Structured Data and WordPress. Thank you for visiting our website. Rest assured that it will serve you well as well.

6 comments

  1. 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

    1. 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.

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

  3. 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.

Leave a comment

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