Jump to content


These Forums Are Now Read-Only


For TubePress support, please post a question here or open a support ticket and we will be glad to assist.


Photo

Responsive Tubepress - A solution!


  • Please log in to reply
5 replies to this topic

#1 Kenny McNett

Kenny McNett

    Member

  • Members
  • PipPip
  • 17 posts

Posted 28 December 2012 - 07:03 PM

A lot of people (including me) have been wanting the Tubepress video page to scale up and down in their responsive sites. I can't guarantee this solution and I'm not really offering support, but it's worth a shot since it seems to be relatively easy and working for me. (Here's the page: http://alchemyregion.com/video/)

The idea:
Use a wordpress plugin designed to make your videos responsive, then apply that plugin to Tubepress.

Needs:

Method
1. Assuming Tubepress is up and running, install the FitVids plugin.

2. On the FitVids settings page (Appearance > FitVids), under "Enter jQuery Selector" put in:
.tubepress_normal_embedded_wrapper
That's the wrapper for the main video on the Tubepress video page

3. Update the widths of the Tubepress main container and the thumbnails container on the video page so that they're no longer a fixed width. This will override the settings you typed in on the Tubepress settings page. In your site's CSS file, add this line:
.tubepress_normal_embedded_wrapper, .tubepress_thumbnail_area {width:auto!important;}

And that's it. Those three steps made my tubepress videos page responsive. At least, as far as I can tell.

Your mileage may vary, but good luck to you! If you leave a comment here, I'll try to be...responsive. :)

Kenny
fittedwebdesign.com

#2 Kenny McNett

Kenny McNett

    Member

  • Members
  • PipPip
  • 17 posts

Posted 28 December 2012 - 07:31 PM

Riiiiight. So it wasn't quite perfect. I went back and ended up having to specify the height of the Tubepress iframe at each screen size break point. Like so:

@media only screen and (min-width: 768px) and (max-width: 959px) { .tubepress_container iframe {height: 420px;} }
@media only screen and (min-width: 481px) and (max-width: 767px) { .tubepress_container iframe {height: 225px;} }
@media only screen and (max-width: 480px) { .tubepress_container iframe {height: 157px;}}

And actually, I turned off the FitVids plugin and it seems I didn't need it at all.

Still, in the end, with only the CSS changes, this appears to be working.

#3 ausbax

ausbax

    Newbie

  • Members
  • Pip
  • 3 posts

Posted 16 March 2013 - 10:18 AM

Hi I found a good Fix for Fixing Responsive issue, hope this will help you too
just add this to your theme style.css :
 
.tubepress_normal_embedded_wrapper, .tubepress_thumbnail_area {width:auto!important;}
.tubepress_container {
        width: 100%    !important;
          height: 75%   !important;}
.youtube-player {
        width: 100%    !important;
        height: 75%   !important;
}


#4 FranzVz

FranzVz

    Member

  • Members
  • PipPip
  • 17 posts

Posted 02 April 2013 - 11:11 PM

Riiiiight. So it wasn't quite perfect. I went back and ended up having to specify the height of the Tubepress iframe at each screen size break point. Like so:
 

@media only screen and (min-width: 768px) and (max-width: 959px) { .tubepress_container iframe {height: 420px;} }
@media only screen and (min-width: 481px) and (max-width: 767px) { .tubepress_container iframe {height: 225px;} }
@media only screen and (max-width: 480px) { .tubepress_container iframe {height: 157px;}}

And actually, I turned off the FitVids plugin and it seems I didn't need it at all.

Still, in the end, with only the CSS changes, this appears to be working.

 

Thanks Kenny, this helps tremendously!



#5 sleeper

sleeper

    Newbie

  • Members
  • Pip
  • 3 posts

Posted 11 January 2014 - 12:58 PM

Bravo! Nice.



#6 702arts

702arts

    Newbie

  • Members
  • Pip
  • 9 posts

Posted 14 February 2014 - 05:00 PM

Can you guys check out this page.

 

http://infoskan.com/darren-ashton/

 

Video One responsive

 

Video Two not responsive. (Player height gets huge on smaller resize)

 

Tried fitvids with no effect.

 

Brad