How To Embed YouTube Video into Website and Make it Responsive

How to embed a YouTube video to a responsive website.

We all know how to embed a YouTube video in our websites but making it appear correct in a ‘responsive’ website is a bit trickier.  Here are some simple steps to keep everything ‘responsive’ including your video.  There are likely many ways to accomplish the same result but I like this easy method.

First, you need to insert some code into your style.css file.  We are going to contain the code into a video wrapper.  Here is the code to insert into  style.css:

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

Next, insert the  code below into the html editor of your webpage at the location of your video, replacing the pink code with your own YouTube identifier code.

<div class=”videoWrapper”>
<!– Copy & Pasted from YouTube –>
<iframe width=”560″ height=”349″ src=”https://www.youtube.com/embed/O42F6KIPyjE?rel=0″frameborder=”0″ allowfullscreen></iframe>
</div>

Upload the style.css file and html page with embedded video.

That should do it.  Good luck!

About Ken

Ken Hook is a Partner with 45 Degrees Latitude Digital Filming & Production Co. He is a Videographer and an Apple Certified Professional Video Editor, FCPX. Versed in website development and SEO, Ken helps businesses combine video with the web.
This entry was posted in Getting Started, Tips and Tricks and tagged , , , , , , , , , , , . Bookmark the permalink.