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%;
}
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
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.
Es español! Jejeje
Muchas Gracias!
Ge ha sido de mucha utilidad, gracias a ti mis videos en mi web son responsive
Saludos!
Great to hear that Jose
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.
Hi Robert, you may have fixed that page because it looks okay from my end