You tube videos Appear Different Dimension

Each video can have different aspet ratio, that is totally normal. Normally, the theme set a global $contnt_width to set the max width for embeded content and the height is auto. For exampl:

if ( ! isset( $content_width ) ) {
    $content_width = 700;
}

If you need to set a specific width and height for embed content you can try the oembed_defaults filter:

add_filter('embed_defaults','cyb_embed_defaults');
function cyb_embed_defaults($defaults) {
    $defaults['width']=700;
    $defaults['height']=500;
    return $defaults;
}

Or use some CSS technique. For exmaple, wrap the youtube embed iframe in a custom div:

add_filter('embed_oembed_html', 'cyb_oembed_html' );
function cyb_oembed_html( $output ) {

    //check that the embed content is from youtube
    if( strpos( $output, 'youtube' ) ) {
        return '<div class="video-container">' . $output . '</div>';
    }

    return $output;

}

And then apply CSS to video-container div. For example, this one make the youtube iframe responsive and works for a aspect ratio of 16:9:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

Find more examples of CSS techniques and jQuery in this demo from CSS-Tricks.

Aside: As I suggested to you in other questions, you should consider to use the built-in template files for custom post type archives instead of using a page template for such thing. You will save some extra queries and extra work.

Related Posts: