Support » Themes and Templates » [Theme: Twenty Twelve] Videos not scaling properly

[Theme: Twenty Twelve] Videos not scaling properly

  • I’m really liking the twenty twelve theme so far except for one thing. Video’s don’t seem to be scaling properly when resizing the browser window.

    1. On my browser the video itself resizes but the embedded player does not, functionality is still the same it just looks odd. The width of the player reduces, but it’s height stays fixed.

    2.On my android phone the videos do not resize

    I’m working off of a child theme I created, but you can see what I’m talking about on my site. There should be a couple vimeo and youtube video on the front page at the moment.



Viewing 3 replies - 1 through 3 (of 3 total)
  • Lance Willett


    Hi mkokes, thanks for the report and details.

    Two possibly related tickets: http://core.trac.wordpress.org/ticket/21480 and http://core.trac.wordpress.org/ticket/21382.

    We decided after deliberation to allow the YouTube height to remain as-is — after a visitor hits “play” the video is correctly sized; it’s just the keyframe image that looks weird until they play.

    I don’t have access to an Android device to test more there — anyone want to help with that?

    If I may add something in for you guys, I think one solution. I’m using themify.me’s ‘basic’ theme as a framework for a different site and they address the problem in a purely html/css format by doing the following.

    1. From the functions.php file, videos links are automatically placed within a div with a class of ‘post-video’ and a transparent background.

    	// Add wmode transparent and post-video container for responsive purpose
    	function themify_add_video_wmode_transparent($html, $url, $attr) {
    		$html = '<div class="post-video">' . $html . '</div>';
    		if (strpos($html, "<embed src=" ) !== false) {
    			$html = str_replace('</param><embed', '</param><param name="wmode" value="transparent"></param><embed wmode="transparent" ', $html);
    			return $html;
    		else {
    			if(strpos($html, "wmode=transparent") == false){
    				if(strpos($html, "?fs=" ) !== false){
    					$search = array('?fs=1', '?fs=0');
    					$replace = array('?fs=1&wmode=transparent', '?fs=0&wmode=transparent');
    					$html = str_replace($search, $replace, $html);
    					return $html;
    					$youtube_embed_code = $html;
    					$patterns[] = '/youtube.com\/embed\/([a-zA-Z0-9._-]+)/';
    					$replacements[] = 'youtube.com/embed/$1?wmode=transparent';
    					return preg_replace($patterns, $replacements, $html);
    				return $html;
    	add_filter('embed_oembed_html', 'themify_add_video_wmode_transparent');

    2. The css used against ‘post-video’ looks like this…

    POST VIDEO (css for fluid video)
    .post-video {
    	position: relative;
    	padding-bottom: 56.25%;
    	height: 0;
    	overflow: hidden;
    	margin-bottom: 15px;
    .post-video iframe,
    .post-video object,
    .post-video embed {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;

    Including FitVids would solve this problem, but it’s clunky for a default theme. http://designisphilosophy.com/tutorials/automatic-responsive-videos-in-wordpress-with-oembed-fitvids-and-a-little-php-magic/

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Theme: Twenty Twelve] Videos not scaling properly’ is closed to new replies.