- This topic is empty.
-
AuthorPosts
-
December 11, 2012 at 10:03 pm #41286GeoUrandaMember
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 #116936GeoUrandaMemberWould like it if TheDoc came to help.
December 11, 2012 at 11:02 pm #116937chrisburtonParticipant@GeoUranda Set the width to 350px
December 11, 2012 at 11:35 pm #116939GeoUrandaMemberThis 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 #116940chrisburtonParticipant@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 #116941GeoUrandaMemberNo, the video won’t show up if you do. It’s just weird tumblr parameters.
December 11, 2012 at 11:52 pm #116942chrisburtonParticipant@GeoUranda and you said you can’t change any CSS to your site’s theme?
December 12, 2012 at 12:22 am #116945GeoUrandaMemberWell 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 #116946chrisburtonParticipant@GeoUranda Try editing your custom CSS and add this
#outerWidgetContainer {
width: 350px;
}December 12, 2012 at 1:16 am #116947GeoUrandaMemberWhere in the code should I add it?
December 12, 2012 at 1:41 am #116950TheDocMemberUnfortunately 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 #116955GeoUrandaMemberSo how would I go about doing this? I’ve had little exposure to HTML and CSS to be honest.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.