Grow your CSS skills. Land your dream job.

Help with tumblr’s video block CSS

  • # December 11, 2012 at 10:03 pm

    Hi! I need help with some coding for my tumblog. I want my videos and Spotify players that I post or reblog to be able to fill out the white area like my pictures do. I have fixed this with my photosets, but can’t figure a way to do this with my video block.

    Here is a link to my tumblog if it helps.
    http://beardthegiant.tumblr.com/

    Thanks in advance.

    # December 11, 2012 at 10:41 pm

    Would like it if TheDoc came to help.

    # December 11, 2012 at 11:02 pm

    @GeoUranda Set the width to 350px

    # December 11, 2012 at 11:35 pm

    This is the code and you really can’t change it to anything besides 250,400,500, and some other options.

    {block:Video}


    {Video-400}
    {VideoEmbed-400}

    {/block:Video}

    # December 11, 2012 at 11:44 pm

    @GeoUranda You can’t change any of those from 400 to 350?

    e.g.

    {block:Video}


    {Video-350}
    {VideoEmbed-350}

    {/block:Video}

    # December 11, 2012 at 11:47 pm

    No, the video won’t show up if you do. It’s just weird tumblr parameters.

    # December 11, 2012 at 11:52 pm

    @GeoUranda and you said you can’t change any CSS to your site’s theme?

    # December 12, 2012 at 12:22 am

    Well I can, but I wouldn’t know how to go about doing it. I didn’t make this particular theme, but I did a lot of my own patch ups if you know what I mean. I edited it a lot. Mostly the customCSS part though so not too much.

    # December 12, 2012 at 12:55 am

    @GeoUranda Try editing your custom CSS and add this

    #outerWidgetContainer {
    width: 350px;
    }

    # December 12, 2012 at 1:16 am

    Where in the code should I add it?

    # December 12, 2012 at 1:41 am

    Unfortunately there’s no real easy way to do this with CSS. In our themes we generally use some simple jQuery:

    function resizeVideo(newPosts) {
    var videos;
    if( newPosts === undefined ) {
    videos = $(“#blog #posts article.type-video”);
    } else {
    videos = $(newPosts).filter(‘.type-video’); // infinite scroll has kicked in
    }

    videos.each( function() {
    var video = $(this).find(“.video iframe, .video embed”);

    video.css({opacity: 0});

    // resize video to 460px and retain aspect ratio
    var videoHeight = video.height()
    var videoWidth = video.width();

    var videoRatio = (videoHeight / videoWidth);

    var newWidth = 460;
    var newHeight = Math.floor(newWidth*videoRatio);

    video
    .removeAttr(‘height width’)
    .width(“100%”)
    .height(newHeight)
    .css(‘opacity’,1);

    $(this).find(‘.tumblr_video_container’).height(newHeight).width(’100%’);

    });

    } // end resizeVideo

    On page load it gets called like this:

    resizeVideo();

    Then when infinite scroll gets kicked in it gets called like this:

    resizeVideo(newElements);

    Obviously you’d need to change a few of these things to get it up and running. Simple CSS changes aren’t going to properly alter the iframes, I’m afraid.

    # December 12, 2012 at 3:20 am

    So how would I go about doing this? I’ve had little exposure to HTML and CSS to be honest.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".