1

I am using the YouTube embed functions to place my video inside my wordpress single post page. I do not want to use oEmbed because it gives me less custimization with hiding the information bar, autoplaying, and showing related videos at the end.

The problem I am having is that, while the video looks fine on the site (you can view it here: http://diginomics.com/bitcoin-will-end-the-nation-state/), on mobile the dimensions look real wonky because it is not responsive.

Here is the embed frame code:

<iframe width="100%" height="500" src="//www.youtube.com/embed/rL66iCVZ6mE?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Notice that I would like the width to be 100% of the container but not flow onto the sidebar. I would also like the height to auto adjust so that it is the correct dimension for an 1080p HD video. I have tried setting height="auto" but this does not work. Therefore, I have left the height at 500px for now.

Is there a solution for what to set the height to make it responsive for a 1080p HD video inside the wordpress container?

closed as off-topic by Pieter Goosen, Mayeenul Islam, cybmeta, birgire, Mark Kaplun Jan 20 '15 at 14:36

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    you may find this article on css-tricks useful: css-tricks.com/NetMag/FluidWidthVideo/… – karpstrucking Jan 19 '15 at 18:03
  • This sounds more CSS-Centric than WordPress-Centric – Howdy_McGee Jan 19 '15 at 20:28
  • Can this please be re-opened and answered? It's a real Wordpress problem, although the solution might be pasting a single youtube URL into the wordpress editor this will not always work and we need a wordpress specific answer. – Dave Hilditch Jan 27 '15 at 23:46
0

Make the media query for <iframe> responsive. Set an id to <iframe>and set max-width and min-width, and give specific size to this <iframe> on different device widths.

CSS:

<style>
    @media screen and (max-width: 400px) {
        #res{
            width:200px; height:200px;
        }
    }
</style>

HTML:

<iframe id="res" src="//www.youtube.com/embed/rL66iCVZ6mE?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>`

Not the answer you're looking for? Browse other questions tagged or ask your own question.