Common Issues with Responsive Video Embeds

Common problems and solutions when using TubePress's responsive embeds feature.

TubePress offers responsive video capabilities, which means that your video embeds will work and look great on any device. However there's a possibility that other scripts on your website can inadvertently interfere with this feature and cause strange effects. This page lists some of those symptoms along with suggested solutions.

Problem: Huge Gap Between Title and Video Player

A common issue is a an unexplained large amount of whitespace between the video title and the embedded player. The image below shows an example of what this looks like.

Huge white space between video and title
 

Cause

99% of the time, this is caused by the presence of the Fitvids.js library on your website. Fitvids.js is a popular library for making video players responsive. When loaded on a page with TubePress, both Fitvids.js and TubePress will try to make the TubePress-generated video responsive. The result is the large gap between the title and video player.

Solution

There are a few different solutions for this problem.

  • Not recommended: Disable TubePress's responsive video capability. This will lead to a very poor TubePress experience for your site's visitors.
     
  • Not recommended: Disable Fitvids.js entirely. This will cause any non-TubePress-generated video embeds to lose their responsive capability.
     
  • Recommended: Configure Fitvids.js to ignore TubePress-generated videos. This gives you the best of both worlds, and allows the two libraries to coexist. We describe this solution below.
     

At the bottom of this page you can download a modified copy of Fitvids.js version 1.1 (in either its full or minified form) that will ignore TubePress videos. Feel free to replace your existing copy of Fitvids.js with either of these files.

If you would prefer to manually edit your existing copy of Fitvids.js, you'll need to add just one line of code to the script. Around line 56 you'll see:

$allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.

$allVideos.each(function(count){

Between those two lines, you'll want to add a single line of new code:

$allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.
$allVideos = $allVideos.not('.js-tubepress-embed');
$allVideos.each(function(count){


Last Updated Jul 13, 2016 01:04PM PDT
c65861bf7a72e1a8878bdf73cabbbdbf@tubepress.desk-mail.com
http://assets0.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete