How to use CSS to make only embedded YouTube video wider

  • Unknown's avatar
    renevanoosten · Member ·

    Hello, I have the CSS upgrade, and I adjusted the theme width till 1500px.
    code:

    #page {
    margin: 0 auto;
    max-width: 1500px;
    }

    body.custom-background {
    background-repeat: repeat;
    }

    .site,
    .site-header {
    max-width: 1500px;
    }

    #site-header [rel=”home”] img {
    width: 100%;
    height: auto;
    }

    I am using TwentyFourTeen Theme.
    How can I change with CSS that the YouTube video’s appear wider?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, what you want to do is to enter the new post area max width in the “Content Width” field below the CSS text area on Appearance > Customize > CSS. The original width was 474px, and you have increased the overall width from 1260 to 1500, which is an increase of 240px. So, 474px + 240px = 714px (if my aging HP11c didn’t let me down). Enter 714 into the Content Width field and then click the save button and then view your site and force refresh the page. The video width should increase. If it does not, edit one of your posts with a video and delete the video and reinsert it and see if that does the trick.

  • Unknown's avatar
    renevanoosten · Member ·

    Thanks for your reply, I tried that, in the preview it shows YouTube video wider, but also the other content (featured image).
    After refresh the width is the same, and the video’s appear higher…
    I’m wondering if there is a code like
    .embed YouTube xxx px yyy px which would fix it for all video’s.

    http://en.support.wordpress.com/videos/youtube/
    Gives some suggestions, however editing 190 post’s seems to be a bit to much to me.
    I think the change need to be in the column width but i have no idea what to add.

  • Unknown's avatar
    thesacredpath · Member ·

    Yes, the change to the content width will enlarge post featured images and images within posts, right along with the videos.

    I don’t know of anyway to enlarge the Youtube videos without enlarging the other media elements (via the Content Width) without editing the code and adding a width to them as explained at http://en.support.wordpress.com/videos/youtube/ . In some instances you can override the width of embedded objects, but in this case, the width and height is embedded in the iframe code from Youtube and I’ve yet to find a way to override those.

  • The topic ‘How to use CSS to make only embedded YouTube video wider’ is closed to new replies.