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
Leave a Reply