You tube videos Appear Different Dimension

Question

I have created custom Post type called "Videos", For Post the YouTube Videos, i have Paste the URL of You tube videos in the WordPress Editor

For Ex:"https://www.youtube.com/watch?v=COviggz8j50"

But Each YouTube videos Displaying Different Dimension

I want to Display my videos In 700 x 350 PX Dimension

Here i am giving the Dimension of first two videos

First video Dimension Width: 500, Height:280

second video Dimension Width: 500 Height: 375

Note: I want to use You tube video URL to Post videos, Not want to use Embed code like <iframe></iframe> from YouTube videos

In my page-videos.php

<div class="main container">
    <div class="content left">

        <?php
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
            $type = 'videos';
            $args=array(
              'post_type' => $type,
              'post_status' => 'publish',
              'posts_per_page' => 5,
              'paged'=>$paged
            );

            $wp_query = null;
            $wp_query = new WP_Query($args);

            if ( $wp_query->have_posts()) :

            while ( $wp_query->have_posts()) :  $wp_query->the_post(); ?>

            <article class="post">              
                <?php the_content(); ?> 
                <div class="clear"></div>
            </article>      
            <?php endwhile;
                    my_simone_paging_nav(); 
            else :
                echo "<p>No content found</p>";
            endif;
            wp_reset_query();  // Restore global post data stomped by the_post().
            ?>          
    </div><!-- End content -->
    <?php get_sidebar(); ?>
</div><!-- End main-content -->

Answer 1

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.