• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Menu
  • Back to Top
  • Services
    • Web Design
    • Graphic Design
    • Web Hosting
  • Portfolio
  • Pricing
    • FAQ’s
  • About Me
    • Blog
    • Contact

Embedding Videos Responsively

Embedding Video

August 14, 2017Dan BrubakerComment

Embedding videos in a WordPress post or page is often claimed to be as simple as copy and pasting the video URL in the WordPress content editor.

It truly is that simple – except if you care about responsive web design! The embedded iframe will not adjust nicely to different screen sizes without some special code.

According to the sources listed below, you must wrap the iframe in a container div and apply the following CSS code:

https://gist.github.com/danbru1989/844bff4fc33f8a5404a80437dc4c33a4

The padding-bottom: 56.25% creates a 16:9 aspect ratio. Targeting the iframe, object, and embed elements with position: absolute, top: 0;, etc.. expands the video inside the wrapper and fills the whole space.

Sources:
A List Apart – Creating Intrinsic Ratios for Videos
CSS-Tricks – Fluid Width Video

Filed Under: Tips & Code Snippets

About Dan Brubaker

I am a husband, father, evangelist, web designer, and sometimes farmer. My family and I live full-time in an RV and travel around representing Servant's Heart Camp. My workspace is small, but the window view is great!

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Contact Me

  • (717) 991-1426
  • danbru@gmail.com

Mailing Address:


5050 Colebrook Road
Hershey, PA 17033

RSS Ministry Updates

  • Ministry Changes & Moving November 4, 2020
  • Revival Ministry and HFA Crusade September 23, 2020
  • Attend Our Online Rally! April 16, 2020
  • Winter Ministry & Outreach February 11, 2020
  • Happy New Year! January 1, 2020
  • Last Meeting And Winter Work November 18, 2019
  • Continued Fall Revival Meetings November 4, 2019
  • Visiting The Quecreek Mine Rescue October 14, 2019
  • Menu
  • Back to Top
  • Services
    • Web Design
    • Graphic Design
    • Web Hosting
  • Portfolio
  • Pricing
    • FAQ’s
  • About Me
    • Blog
    • Contact

    Services

  • Web Design
  • Graphic Design
  • Web Hosting

    Information

  • About Me
  • Portfolio
  • Pricing
  • Privacy

    Contact Me

  • (717) 991-1426
  • danbru@gmail.com
Log In
Copyright © 2023 — Brubaker Design Services