How to Make Embedded YouTube Videos Responsive

  • Howdy,

    I’m embedding YouTube videos on my self hosted WordPress blog, and I’d like to make it responsive. The only part of my blog posts that is not responsive is the YouTube Embed.

    Here’s my code:

    [(embed) width=”420″ height=”315″]https://www.youtube.com/watch?v=WP9rd5j-mZM[(slash)embed]

    Take out the parentheses and change “slash” into “/”.

    Without the width and height, the video’s monstrously large. It may be responsive that way, but it’s obnoxious on desktops.

    I tried width and height at 100%, 50% and other settings, but it doesn’t work. It’ll produce nothing but a tiny video. Any ideas?

    The worst thing WordPress has ever done is the automatic stripping of html code that people add in the text editor. [Rude comments moderated – if you want help on these forums, that’s not going to help you get it]

Viewing 3 replies - 1 through 3 (of 3 total)
  • wpismypuppet

    (@wordpressismypuppet)

    Do a simple Google search… you’ll get results like this:

    https://avexdesigns.com/responsive-youtube-embed/

    Your problem is not with WordPress or the embed… it’s all CSS driven.

    And if you need to add a <div> around your embedded video, use something like this:

    add_filter( 'embed_oembed_html', 'custom_oembed_filter', 10, 4 ) ;

function custom_oembed_filter($html, $url, $attr, $post_ID) {
    $return = '<div class="video-container">'.$html.'</div>';
    return $return;
}

    For what it’s worth, as a developer I’m glad they strip code out of the editor. Most clients don’t know what to do with it, and they end up breaking layouts by trying to get fancy. A good developer knows how to manipulate default templates and even create their own if needed. Don’t hate on WordPress… do some research and learn.

    I totally agree with wpismypuppet.

    Here is a good article on responsive videos:

    Thread Starter monkeywisdom

    (@monkeywisdom)

    WordPress is great. There’s just a couple things that really tick me off, like not being able to add a Google Plus button to a post for instance. Anyway, I like your ideas, and that article just LasseMT posted feels right. I’ll bookmark this conversation and try that out. My theme is awesome and it allows CSS insertion in the theme admin. Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to Make Embedded YouTube Videos Responsive’ is closed to new replies.