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">

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

            $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>
            <?php endwhile;
            else :
                echo "<p>No content found</p>";
            wp_reset_query();  // Restore global post data stomped by the_post().
    </div><!-- End content -->
    <?php get_sidebar(); ?>
</div><!-- End main-content -->

1 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:

function cyb_embed_defaults($defaults) {
    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.

  • @ cybmeta What is built-in template files ? And how to use it for custom post type
    – Relax
    Dec 27, 2014 at 17:21
  • The explanation is too long for a comment. See Template Hierarchy and Post Type Templates. If you have questions, don't hesitate to post a new question. A short example: for "recipes" CPT the archive is auto generated by WP in "mysite.com/recipes" and WordPress will use this template files, in this order if they exist: archive-recipes.php, archive.php, index.php. So, if you use one of this template files, you avoid the extra query for the page template and all the job for the custom query.
    – cybmeta
    Dec 27, 2014 at 17:51
  • I've found a very basic tutorial where you can start: wpbeginner.com/wp-tutorials/…
    – cybmeta
    Dec 27, 2014 at 17:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.