5 replies to this topic

[Kenny McNett]

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:

• Tubepress installed and active on a video page
• Install the wordpress plugin: "FitVids for WordPress" found at http://wordpress.org...-for-wordpress/
• Be able to edit your CSS

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

[Kenny McNett]

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.

[ausbax]

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;

}

[FranzVz]

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!

[sleeper]

Bravo! Nice.

[702arts]

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