WordPress.org

Forums

Twenty Twelve
Properly resizing videos, possible code addition? (7 posts)

  1. Marty Kokes
    Member
    Posted 2 years ago #

    I'm not sure if other have noticed but videos seem to resize a little wonky if embedded as iframes, which is usually the case if oembed is used(i.e. just posting the link rather then the full embed code). The width of the video resizes, but it doesn't retain the proper aspect ratio.

    It was suggested that I just use fitvids.js, but I'd rather handle the problem natively with css and html before relying on javascript. I found this article on web designer wall along with this article and it works like a charm.

    Basically you add this code to the functions.php file (preferably of a child theme)

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

    Then you add this css to your stylesheet and you're done. You can change the width of the wrapper(it's set to 960px in the example) to be whatever fixed size you'd like your videos to max out at or just leave out the wrapper entirely to keep it fluid.

    .video-container {
    	position: relative;
    	padding-bottom: 56.25%;
    	padding-top: 30px;
    	height: 0;
    	overflow: hidden;
    }
    
    .video-container iframe,
    .video-container object,
    .video-container embed {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }
    .video-wrapper {
    	width: 960px;
    	max-width: 100%;
    }

    I'm mainly just throwing this up here in case anyone else runs across this issue or it might be something to include in a future update to the twenty twelve theme.

    The site that I'm using this on is http://martysgarage.info if you'd like to see a working example.

  2. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    Yup http://fitvidsjs.com/ does that and there's also a plugin too http://wordpress.org/extend/plugins/fitvids-for-wordpress/

    Thanks,
    Emil

  3. paulwpxp
    Font hero
    Posted 2 years ago #

    @Emil, not sure if you answered to the write post, he basically found a CSS only solution and was hoping if this code could be used in core.

    @mkokes, this forum is not the right place for this, if you could, please consider go directly to the trac, there are tickets already, links in your previous post.

  4. Marty Kokes
    Member
    Posted 2 years ago #

    Thanks @paulwp! I'll check that out

  5. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    It's not CSS only when you use function css_oembed_filter.

    I was bit tired last night and wasn't paying enough attention that @mkokes eliminated the JS, if so this is definitely very helpful not only for default Theme but also for many others out there :)

    Thanks,
    Emil

  6. Tomas Mackevicius
    Member
    Posted 2 years ago #

    So will you include this into core and/or Twenty Twelve?

  7. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    FYI: I'm testing this with my Theme, it would be nice alternative to JS. Nice going Tomos site BTW, if we were closer I would be in your garage daily ;)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic