Forums

GeoUranda

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.

GeoUranda

Would like it if TheDoc came to help.

chrisburton

@GeoUranda Set the width to 350px

GeoUranda

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

                  {block:Video}
                  <center>
                  {Video-400}
                  {VideoEmbed-400}
                  </center>
                  {/block:Video}

chrisburton

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

e.g.

{block:Video}
<center>
{Video-350}
{VideoEmbed-350}
</center>
{/block:Video}

GeoUranda

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

chrisburton

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

GeoUranda

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.

chrisburton

@GeoUranda Try editing your custom CSS and add this

  #outerWidgetContainer { 
      width: 350px;
  }

GeoUranda

Where in the code should I add it?

TheDoc

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.

GeoUranda

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

treehouse : what would you like to learn today?

Forums

Help with tumblr's video block CSS