How to Make TubePress Responsive

TubePress is a well-designed plugin that brings YouTube or Vimeo video gallery into WordPress website. With easy CSS hack, we can easily fit TubePress video gallry to different theme. But out of the box, TubePress doesn’t offer responsive option.

It seems unfair to say so, because the thumbnail gallery indeed rearranges the thumb icons when browser width is changed, which looks like “responsive”. But this doesn’t apply to TubePress video player. Which has only “px” value in plugin setting.

tubepress-player-setting

Well, let’s change that. Put following code in your custom CSS file, or any other way that you like to make custom CSS work, we can make TubePress responsive.

.tubepress_normal_embedded_wrapper, .tubepress_thumbnail_area {
	width:auto!important;
}

.tubepress_normal_embedded_wrapper{
	position: relative !important;
	padding-bottom: 56.25% !important;	// Aspect ratio
	width:100% !important;
	padding-top: 30px !important;
	height: 0 !important;
	margin-bottom:20px !important;
}

.youtube-player {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

The 56.25% for padding-bottomĀ is the my favorite 16:9 aspect ratio. Change it to match your design.

 

Test environment: