Rectangle 27 2

No need to use fitvids.js, you can use the padding-top trick:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.videoWrapper iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

And then this goes in the Tumblr template:

<div class="videoWrapper">{VideoEmbed-500}</div>

You can see it in action on this tumblog

NOTE: that 56.25% is the result of 9/16, that means that the videos are fixed at the ratio 16:9. If you plan on having square videos or any other ratio, like 4:3

  • apply a hashtag like #fourthirds
{TagsAsClasses}
.videoWrapper
<div class="videoWrapper {TagsAsClasses}">{VideoEmbed-500}</div>
  • add rules like this one: .fourthirds { padding-bottom: 75%; /*video is 4:3, therefore 3/4 = 0.75 = 75%*/ }

Thanks. Also, this won't work if using YouTube or Vimeo embeds via the {Video} template tag that wraps them in a second iframe. I does work, however, if they're inserted as a text post.

That's why you need to use {VideoEmbed-500}, not {Video-500}. It's confirmed to work with YouTube videos as well.

Ah okay. What's the actual difference? The documentation says lightbox, but I don't see one on either tag.

Yeah the documentation is not clear, but the difference I found was that {Video-500} is the same as {VideoEmbed-500} plus some fixes for people who can't code. :D I use the latter simply because I don't want Tumblr to add unnecessary elements.

@mikedidthis That's not completely correct: YouTube videos may output the same code, but not Tumblr videos. Have a look at this tumblr, open its source and see that the Tumblr video embed code is completely different and the resulting iframe will be in a div. As for the solution, yeah that's a limitation, but as I specified in the answer, you just have to specify the ratio in an hashtag and create a rule for it.

javascript - Responsive Tumblr videos not working - Stack Overflow

javascript iframe video tumblr
Rectangle 27 2

I am adding this for reference and sanity. There are two key parts to making Tumblr's own videos responsive and not breaking your layout.

When picking the video variable size, pick the one that is smaller than the video embeds parent. For example, if the parent is 300px wide, use the variable: {VideoEmbed-250}.

Anything larger than the parent, will play havoc with your layout and end up breaking it, visual example.

As suggested, we need to use some sort of padding-top trick to make video embeds fluid / responsive. Using a set value for padding-top is limited as the ratio of each video may differ.

Alternatively, you can use fitvids.js with the following custom selectors:

$('.video-wrapper').fitVids({ customSelector: "iframe[src*='tumblr.com'], iframe[src='about:blank']" });

javascript - Responsive Tumblr videos not working - Stack Overflow

javascript iframe video tumblr
Rectangle 27 0

$('#likeit').attr('src', like);
$(this).attr('src', like);

and to validate that the like link is correct, you could either do:

alert(like);

or if you have firebug or chrome do:

console.debug(like);

jquery - Tumblr inline like button on homepage - Stack Overflow

jquery iframe tumblr
Rectangle 27 0

From your tumblr dashboard, each post has a 'reblog' icon. Surely if you click this, that post's reblog url will appear in the addres bar? Of course, this means adding the url manually for each post, but it's the only alternative I've found to the default tumblr controls.

'Follow' and 'Dashboard' are bog standard a href commands, but I'm still looking for a way to have a simple text link for the 'like' functionality, so that I can do away with the default controls altogether.

jquery - Tumblr — getting the 8 digit reblog code on home page (nearly...

jquery iframe tumblr
Rectangle 27 0

Photosets in Tumblr load in an iframe. You can't modify the styling of items inside that iframe. So adding a border around each image is not going to be possible.

How about videos? Is it possible? @NickAngiolillo

you can actually modify the contents of the iframe as they reside on the same server as the main content, but it is fiddly. But certainly possible. Alternatively you can change the way that photosets are served in the theme options.

Well I say you can, I have done this with jquery, so it is a slight cheat, but it does achieve the end results.

html - Tumblr-Putting borders around videos and each photoset picture ...

html css border tumblr
Rectangle 27 0

What you could do, as the Tumblr support suggested, is to use an iframe and simply embed the whole Tumbleblog inside. Like this:

<iframe src="http://website.tumblr.com" width="42px" height="42px">
  <p>Your browser does not support iframes.</p>
</iframe>

The pagination has to take place on the actual Tumbleblog, like it is by default. Biggest downside is that it will be tricky to differ the design/layout and behaviour for the one that's embedded on your blog and the direct one (because it's the same, duh).

thank you for your response laander. I have imported some javascript from the goodies section of Tumblr on the botton right hand side of that section. Do you know how I might go about creating a pager for the content generated by that script in my text editor? What would I use? iframes? would I use JQuery pagination...having a hard time finding a tutorial to make this happen. I hope someone can help!!

I'm not certain that it is do-able with the javascript tumblr provides as it generates the output on it's side first and then serves it to you - if they don't provide a pagination feature, you will have to modify their output and implement it yourself. That might be tricky if you don't have much experience with javascript/jQuery. The simplest solution is to skip the javascript embed and use the iframe version I provided above. Simply put the HTML in your document (instead of the javascript embed) and your Tumblr should embed itself. Not ideal, I know, but the pure JS version is a challenge.

embedding - How can I create pagination for a tumblr blog embedded on ...

pagination embedding tumblr
Rectangle 27 0

#iframe_controls { display:none; }

To the CSS (inside tag of 'Edit HTML').

javascript - Manipulating Tumblr's default iframe controls - Stack Ove...

javascript jquery css iframe tumblr
Rectangle 27 0

have you tried to set the scrollTop property? this will maybe trigger the scroll-event.

$('iframeId').scroll()

scroll - How to get an infinite scrolling system to work within an ifr...

iframe scroll embed tumblr infinite-scroll
Rectangle 27 0

No need to use fitvids.js, you can use the padding-top trick:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.videoWrapper iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

And then this goes in the Tumblr template:

<div class="videoWrapper">{VideoEmbed-500}</div>

You can see it in action on this tumblog

NOTE: that 56.25% is the result of 9/16, that means that the videos are fixed at the ratio 16:9. If you plan on having square videos or any other ratio, like 4:3

  • apply a hashtag like #fourthirds
{TagsAsClasses}
.videoWrapper
<div class="videoWrapper {TagsAsClasses}">{VideoEmbed-500}</div>
  • add rules like this one: .fourthirds { padding-bottom: 75%; /*video is 4:3, therefore 3/4 = 0.75 = 75%*/ }

Thanks. Also, this won't work if using YouTube or Vimeo embeds via the {Video} template tag that wraps them in a second iframe. I does work, however, if they're inserted as a text post.

That's why you need to use {VideoEmbed-500}, not {Video-500}. It's confirmed to work with YouTube videos as well.

Ah okay. What's the actual difference? The documentation says lightbox, but I don't see one on either tag.

Yeah the documentation is not clear, but the difference I found was that {Video-500} is the same as {VideoEmbed-500} plus some fixes for people who can't code. :D I use the latter simply because I don't want Tumblr to add unnecessary elements.

@mikedidthis That's not completely correct: YouTube videos may output the same code, but not Tumblr videos. Have a look at this tumblr, open its source and see that the Tumblr video embed code is completely different and the resulting iframe will be in a div. As for the solution, yeah that's a limitation, but as I specified in the answer, you just have to specify the ratio in an hashtag and create a rule for it.

javascript - Responsive Tumblr videos not working - Stack Overflow

javascript iframe video tumblr
Rectangle 27 0

I've had a similair problem when making Tumblr themes; that images and Tumblr photosets (photos displayed in an iframe) show a little "padding" beneath them, despite the padding being zero in the CSS. The solution was to make them blocks;

img, iframe {
    display: block;
}

Maybe you could try to display your images as inline-block, since they are side by side?

Thanks, but I already made the img tag blocks, but this doesn't work for me, unfortunately.

html - Firefox adds extra space after image in div (or makes divs bigg...

html image firefox margin spacing
Rectangle 27 0

I think you could achieve this on a website using a trick to manually modify the address in the URL bar without reloading the page. See this question for more information. Unfortunately I am not familiar with how Tumblr works internally so I wouldn't be able to say if you can actually use this. But it seems like the only way to achieve what you want.

How can i make the parent url automatically update to a unique url whe...

url iframe parent tumblr
Rectangle 27 0

How to get a Photosets iframe src

Sadly, there isn't a theme operator that gives us the src as a string, the only option we have is to use {Photoset-500} as OP states. However, it is possible to work the iframe src out with the theme operators we have.

http://mikedidthis-pierre.tumblr.com/post/37187983482/photoset_iframe/mikedidthis-pierre/tumblr_meih4y5SDi1rkq61e/700/false

We can break this down into 7 parts:

37187983482/
photoset_iframe/
mikedidthis-pierre/
tumblr_meih4y5SDi1rkq61e/
700/
/false

1 The URL of the Tumblr blog, prefixed with post/. 1 and 2 should be used in tandum.2 Unique Post ID.3 A generic, consistant sub directory.4 At first glance looks like the Tumblr username. I wouldn't say its the Tumblr URL due to custom domains. However, it seems like it can be changed to anything, as long at it contains a character.5 A unique Tumblr generated ID. Think reblog keys. This is the part we really need and there are no theme operators to generate this.6 The size, in width of the iframe.7 Shadow mode. I believe turning this to true adds drop shadows to each of the photos in a photoset.

So using the available theme operators like so:

{BlogURL}/post/{PostID}/photoset_iframe/x/ * missing 5 * /700/false

We can almost generate the full src!

http://mikedidthis-pierre.tumblr.com/post/37187983482/photoset_iframe/x/ * missing 5 * /700/false

The bad news is, we are going to need javascript. I am not going to cover that, but I will explain how we can get the missing information. If you use the theme operators for a photoset, that just give use the image urls `{PhotoURL-500}:

http://25.media.tumblr.com/tumblr_meih4y5SDi1rkq61eo4_500.jpg

Can you see 5? Lets break it down:

http://25.media.tumblr.com/
tumblr_meih4y5SDi1rkq61e
o4
_500
.jpg

1 Address for the Tumblr server the image is hosted on.2 The missing data 5.3 This is the number of the image in the photoset, so 4th. However, I think this relates to upload order, rather than display order.4 Size of the image.5 File extension.

So to get the complete iframe src, you are going to need to use javscript to find the data for part 5 and then combining that with the data we already have from the available theme operators.

OP hasn't stated why they need the iframe URL. I would presume for delaying the loading, maybe to do with responsive.

Iframe based Photoset using information from above: Example.

@soo-ling My pleasure. It was fun to answer! Can I ask why you needed the iframe src?

It was a very silly reason....I am almost embarrassed to say it now....Here goes: I wanted to get Pinterest to work on photosets: so when the pin it button is clicked, users can select an image from all the images from a photoset to pin, but after putting in the code provided by Pinterest and providing the URL of the blog post, it extracts nothing. I thought if I gave it the iframe src it would work. But after all that, it still doesn't work.

Do you know how to get the Pin It button to work on Photosets? (I can create a new question since it is different from this one.)

@soo-ling Nothing embarrassing about that at all. If you add the question, I will answer what I know. (iirc, its only possible to pass in the last image in a photoset, but I should look again)

How to get the URL of a Tumblr photoset iframe - Stack Overflow

iframe tumblr
Rectangle 27 0

In tumblr documentation for photosets {block:Photos} {/block:Photos} block exists, which will be executed so many times, as how many images are in the photoset. Try to output each image in photoset with this block. Images will be not in an iframe and full under your CSS control, with this trick.

javascript - Tumblr display photoset posts as a slideshow - Stack Over...

javascript jquery tumblr
Rectangle 27 0

Looks like you've got it working, but for future readers I've simplified my like button code to eliminate the confusion most people have with it (the post id) to make it a simple cut and paste. It's available at http://like-button.tumblr.com.

{block:Posts}
<script>
if ( !document.getElementById( 'my-like-frame' ) ) {

var styles =
      '<style>'
    + '.my-like {'
    + 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAABH0lEQVQ4y62T30vCUBiGv/9YuhBLkCA08FdogRFFYFEUhhZNCCQoSESiIOii68pl5qV6s8Eb7+SMHXNs6S7ejZ3zvA+ccT4BICofvS88dJ7w8vqG8WQC754K17lPjrx3z3l8D4YoVaqIrWbcJNbzaHefNZjfXPdy5b0jsO/IRqMxUpmSBnhz2bx1QL79GPbpEePmzhdSyW8fBDL0SK68HwiGCT2S3NiKREaPzP7QRRNPZSHpwm4kMnqkYbQikdEjZv8HK2ubS4nY75mD6WU8qzeXkrHvToBlWSjuHC4kYo99V8bwBnM0/iMiz542myq2bSPskcmR/zPos7lvP8Lv/nGd+/N6c2Xq2KcXhiY6qV1rxwotU3n/NHF8fgW+g9hfsHJlJUYljcgAAAAASUVORK5CYII=) !important;'
    + 'height:17px;'
    + 'width:19px;'
    + 'cursor:pointer;'
    + 'display:inline-block;'
    + 'vertical-align:top;'
    + '}'
    + '.my-liked, .my-like:hover {'
    + 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAABSklEQVQ4y2P4//8/Awy/O3fu/905c/4/2779/69Pn/4jy8Hwz/fv/z/buvX/vfnz/7+/eBFFDZj4cOXK/8O+Pv+36+rA8W4zs/8Ply1DUXx/4cL/u0yMUdQdCQ76/+nWLbA6hq+PH//fbW6OogAZ3+zvByu81t6OU80ea6v/P16//s9wqboKpyIYPhYeTlDN1abG/wz7HR0JKiQGH3Bz+8+ww0CfKobtMjb6z0ANg+CGgQKPKt50dfnPcL6wkCqGXaoo/8/w5tgxyg3T0wUnYHBiPJuZSZFhF8pK/8NzACjrgKKWHINAOef3168Iw0D429OnGFmKEAZlJVDKR8mbMAyy4XRqClEGnc3J+f/nxw/MjI6OQflxh6EBzvR0Z9o0rCUKVsNA+MuD+/9PJiSgGHQmPf0/KDhw6cFpGAy/OnAAbOibEyf+E1ILAFBjDrchm7KrAAAAAElFTkSuQmCC) !important;'
    + 'height:17px;'
    + 'width:19px;'
    + 'cursor:pointer;'
    + 'display:inline-block;'
    + 'vertical-align:top;'
    + '}'
    + '</style>';
document.head.insertAdjacentHTML( 'beforeEnd', styles );
document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' );
document.addEventListener( 'click', function ( event ) {
    var myLikeLink = event.target;
    if( myLikeLink.className.indexOf( 'my-like' ) > -1 ) {
        var myLikeFrame = document.getElementById( 'my-like-frame' ),
            liked = ( myLikeLink.className == 'my-liked' ),
            command = liked ? 'unlike' : 'like',
            reblog = myLikeLink.getAttribute( 'data-reblog' ),
            postId = myLikeLink.getAttribute( 'data-id' ),
            oauth = reblog.slice( -8 ),
            likeUrl = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + postId;
        myLikeFrame.src = likeUrl;
        liked ? myLikeLink.className = 'my-like'
            : myLikeLink.className = 'my-liked';
    };
}, false );

};
</script>
{block:Posts}{/block:Posts}
<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}"></div>

iframe - Tumblr jQuery Like (grabbing from rel) - Stack Overflow

jquery iframe like tumblr
Rectangle 27 0

Figured it out, it was a very simple fix once I analyzed the code generated by jQuery.

<article{block:Date} id="post-{PostID}"{/block:Date} class="post type-post {PostType} hentry entry" rel="{ReblogURL}">

This generated the following link in the iframe src

So obviously removing post- in the code above made the end result link correct; and liking now works.

iframe - Tumblr jQuery Like (grabbing from rel) - Stack Overflow

jquery iframe like tumblr
Rectangle 27 0

Open up your blog > go to 'customize' > scroll down to the very bottom, click 'advanced options' > uncheck the box that says 'Promote Tumblr!'. This will disable the follow iframe from non-tumblr users.

Unfortunately there is no way to tell if a user is logged in (or indeed has an account) or not to hide the 'like' and 'reblog' buttons.

Technically there is a way to tell if a user is logged in, but its horrible. Disable Promote Tumblr. If the page contains the following element, <iframe id="tumblr_controls" />, the visitor is a logged in Tumblr user. If not, the visitor is not logged or anonymous.

You could also add the following to your CSS to disable the iframe altogether: iframe#tumblr_controls {display:none !important; but that means everything is gone... reblog, like, follow, unfollow, dashboard (and others if you use xkit) from the top corner.

how can I hide like/reblog buttons from a none login tumblr user? - St...

tumblr
Rectangle 27 0

I am adding this for reference and sanity. There are two key parts to making Tumblr's own videos responsive and not breaking your layout.

When picking the video variable size, pick the one that is smaller than the video embeds parent. For example, if the parent is 300px wide, use the variable: {VideoEmbed-250}.

Anything larger than the parent, will play havoc with your layout and end up breaking it, visual example.

As suggested, we need to use some sort of padding-top trick to make video embeds fluid / responsive. Using a set value for padding-top is limited as the ratio of each video may differ.

Alternatively, you can use fitvids.js with the following custom selectors:

$('.video-wrapper').fitVids({ customSelector: "iframe[src*='tumblr.com'], iframe[src='about:blank']" });

javascript - Responsive Tumblr videos not working - Stack Overflow

javascript iframe video tumblr
Rectangle 27 0

If you are OK with jquery solution then try this.

$(document).ready(function() {
   $('iframe').each(function(){  
   $(this).attr('scrolling','yes');
   });
 })

javascript - Apply Attribute 'Scrolling=yes' to All iFrames - Stack Ov...

javascript html css iframe tumblr
Rectangle 27 0

The Tumblr dashboard will only play video previews for Video Posts. Anything embed in a caption or body will not get the preview treatment.

AFAIK, the only way to get a custom video to have a preview would be for Tumblr to work with your own platform / API. Tumblr pulls in the preview thumbs when you make the Video Post, if they support the platform.

Mm, I'm wondering if they have some sort of special treatment for those sites, a whitelist for trusted sources. Otherwise I could just check what javascript a vimeo iframe supplies for example, and then just copy whatever they serve up.

I am almost positive Tumblr pulls in the preview images server side, based on the video provider and its not possible to force it.

Bad news then :( I suppose that's the most logical reasoning though

javascript - Embedding HTML5 video in Tumblr (dashboard and blog) - St...

javascript html5 iframe video tumblr
Rectangle 27 0

So on this tumblr the 3 posts along the top are ones I have tried.

First is a Video type post but simply passing the url to tumblr.

Second is a text post but passing custom embed html from vine (this included a script which I did not know would work).

Third is a text post with an iframe in that I hand coded.

I think metcalf seems to be flash video and I don't know if that is supported, but a little googling should tell us.

Interesting, did not expect Vine to work like that. But still, it's not showing anything in the Tumblr dashboard..

javascript - Embedding HTML5 video in Tumblr (dashboard and blog) - St...

javascript html5 iframe video tumblr