Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Not working with Blip.tv...? #66

Closed
impressivewebs opened this Issue Jul 30, 2012 · 13 comments

Comments

Projects
None yet
5 participants

On the readme it says Fitvids works with Blip.tv, but look here:

http://jsbin.com/ejazuf/1/edit

Notice the video wrapper that's supposed to be placed around the video by the script is actually appearing below the video, creating a big gap between the video and the links (which should be right under the video).

Has anyone seen this bug before? I didn't investigate it too much but I also couldn't find any issues discussing blip.tv on here.

Collaborator

chriscoyier commented Jul 30, 2012

Blip isn't in the defaults anymore I guess. Gotta do:

$(".entry-content").fitVids({
  customSelector: "iframe[src^='http://blip.tv']" 
});

Ok, that makes sense.

What is weird is that Blip.tv's embed code adds an extra "embed" element after the iframe, which seems to be the reason that the big gap appears. The gap is actually still there when I correct the code as you suggested.

Removing that element fixes the gap... but I really don't know why they have that other element to begin with, since it's given display:none in its inline styles. Weird.

Did you ever resolve this issue?

Collaborator

kenhowardpdx commented Sep 24, 2014

@davidzack - I don't see any issues with blip.tv's iframe. Here's an example: http://plnkr.co/edit/yOkLMJJWTYPqVbbteFIK?p=preview

That's because you have no content below

I added text after it, and you can see the gap: http://plnkr.co/edit/Xy2sn9bZf627AyeNMEKQ?p=preview

@davidzack I'm not sure exactly why this issue was closed, as @chriscoyier's solution above doesn't seem to fix it. But here's a CSS solution:

http://plnkr.co/edit/NokjSCCLil1s3EYwmnZB?p=preview

Notice I added the following rule set in the CSS:

.fluid-width-video-wrapper + .fluid-width-video-wrapper {
  display: none;
}

That should be pretty safe to not override anything else in your stylesheet, and you could also add !important to it if you wanted.

And just to be clear: It seems this is caused by the fact that FitVids adds "padding-top: 50%" to the wrapper element, but Blip.tv embeds seem to add two of the same wrapper element. The HTML embed element inside the 2nd wrapper is set to "display: none", but the padding on the wrapper is what causes the problem.

Of course, if the browser needs to fall back to the embed element, then I guess this isn't a good solution.

That does the trick. I was hoping to fix the issue at the source, rather than render it improperly then correct, but a fix is a fix! Thanks.

Collaborator

kenhowardpdx commented Sep 24, 2014

@impressivewebs, @davidzack - This is an issue with the embed that follows the iframe. Remove the embed and you don't need to do this crazy CSS trickery. Have a good day.

@kenhowardpdx @davidzack That's right, you know what, scratch my idea. Just remove the embed. I think the only reason that's there is for ridiculously ancient browsers that aren't used anymore. I can't remember exactly which browsers, but I'm pretty sure nobody needs that anymore.

This project is a WordPress site. When you add a blip.tv URL, the embed gets added automatically. So for now, the nested CSS listed above is probably a good option...

Collaborator

kenhowardpdx commented Sep 24, 2014

Bummer.

While not technically a bug with FitVids, maybe we can have FitVids check that the target object is visible before wrapping it. That would prevent this issue.

@davatron5000, @chriscoyier -- Any thoughts on this?

Yeah, I think that's the key, that Fitvids shouldn't add the padding to the embed element, only to the other element.

Owner

davatron5000 commented Sep 24, 2014

So... The embed is being generated by the Blip.tv OEmbed? If we were to modify FitVids to accommodate this issue that'd be FitVids 2.0 scope since it'd contain breaking changes (removal of selectors).

My advice would be to see if you could sneak in some JavaScript before to remove that embed tag.

jQuery('.post').find('embed[src*="blip.tv"]').remove();
jQuery('.post').fitVids({
  customSelector: 'iframe[src*="blip.tv"]'
}););
</script>

You could also try to extend the customSelector tag even further to NOT match... not sure if this would work.

jQuery('body').fitVids({
  customSelector: 'iframe[src*="blip.tv"], *:not(embed[src*="blip.tv"])'
});

@davatron5000 davatron5000 reopened this Sep 24, 2014

@davatron5000 davatron5000 added the Bug label Jan 27, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment