Adding a Responsive Fullwidth Video to Your WordPress Post

Amber, aka ‘Biz,’ knows WordPress, she likes helping people, this time with full-width video.

As things stand, adding videos to your blog posts is pretty simple. However, the default video embed code doesn’t allow you to create responsive full-width videos on the page. In this article, we’ll explain how to add the necessary styles and html to your WordPress site to display videos beautifully. Having previous experience with CSS and HTML is great but not necessary for this tutorial. We’ve outlined the process in a simple copy and paste fashion! 

Add the Styles

You can add and update styles within your WordPress site using the CSS editor within the Appearance Customize Screen. Login to the admin area and go to Appearance > Customize > Additional CSS and add the following styles.


.video-holder {
display: inline-block;
position: relative;
padding-bottom: 60%;
width: 100%;
}
.video-holder iframe {
height: 100% !important;
position: absolute;
top: 0; left: 0;
width: 100% !important;
}

About the styles

It’s important that the video holder is positioned “relative” to contain the child iFrame element, which is to remain positioned “absolute”. The bottom padding of the video holder can be adjusted to change the height of the video.

Add the iFrame

  1. Copy the html below and paste it into the text tab of the editor in the location that you want to implement the full-width video embed.
  2. Replace the <iframe></iframe> code block with the iframe code from the video you want to embed.
  3. Instructions on how to get the embed code are below this code sample.
<div class="video-holder"><iframe src="https://www.youtube.com/embed/[VIDEO ID]" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

Get the embed code: Vimeo

Navigate to the video you want to use in your web browser.

  1. Click the share icon within the video player, or the share button under the video.
  2. A ‘Share this video’ dialog box will appear on the page with 3 options: Link, Send Email, and Embed.
  3. Click the ‘show options’ link to the right of the Embed option.
  4. Uncheck the ‘Show text link underneath this video.’ option. This removes irrelevant code.
  5. Copy the <iframe></iframe> code.

Once you have implemented the code in the post the video should appears fullwidth in the content area.

Get the embed code: YouTube

Navigate to the video you want to use in your web browser.

  1. Click the share button under the video.
  2. A ‘Share’ dialog box will appear on the page. Click the’Embed’ link on the bottom of the box.
  3. The video will pop up with embed options to the right. Copy the <iframe></iframe> code, as is.

Once you have implemented the code in the post the video should appears fullwidth in the content area.

Reading about best practices is nice. Practicing them is even nicer.

About the author

Web Developer

Amber bundles a decade of industry experience in development, graphic design and SEO into a [...]