WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
Videos not scaling properly (4 posts)

  1. mkokes
    Member
    Posted 1 year ago #

    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.

    http://martysgarage.info

    http://wordpress.org/extend/themes/twentytwelve/

  2. Lance Willett
    Themer
    Posted 1 year ago #

    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?

  3. mkokes
    Member
    Posted 1 year ago #

    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;
    				}
    				else{
    					$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);
    				}
    			}
    			else{
    				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%;
    }
  4. Morten Rand-Hendriksen
    Member
    Posted 1 year ago #

    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/

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic