Imported Video Dimensions

Not sure I understand the question.

The videos aren’t really imported, just the data about the videos.

So the dimensions of the video are whatever dimensions they are on the source site (i.e. YouTube, Vimeo, or Twitch).

Your theme will then display the videos, and is responsible for determining what size they show up at on your pages.

When the video appears in the post its not centered and not using the full space of the page. Where in a theme is the usual place to adjust such settings? Ill show you an example below.

https://vexradio.com/2017/10/02/g-herbo-joins-for-chicago-rap-scene-jay-z-and-kap-21-savageamber-slutwalk-everyday-struggle/

• This reply was modified 7 years, 5 months ago by clientele.
• This reply was modified 7 years, 5 months ago by clientele.

It appears the video are posting with out responsiveness and width is not “100%”

Okay, two approaches…

1) Just now realizing the “out of the box” the plugin doesn’t wrap the iframe in a container div, making it a bit harder than ideal to target via CSS.

I’ve updated the plugin to do so, but it might not get pushed out for a bit.

If you want to “hack” the plugin until such time as an update gets pushed, you can go into the file “class-tube-vc-embed.php” and add a wrapper div…

BEFORE (Lines 61 – 70)

    // get the embed code for the video    
    $video_embed = $this -> get_video_embed( $post->ID );

    if ( ! $video_embed ):
      
      return $content;
      
    endif;
    
    // get the video placement option
    $video_placement = get_option( 'tube_vc_video_placement' );

AFTER (Lines 61 – 73)

    // get the embed code for the video    
    $video_embed = $this -> get_video_embed( $post->ID );

    if ( ! $video_embed ):
      
      return $content;
      
    endif;
    
    // wrap the video in a div
    $video_embed = '<div class="tube-video-wrap">' . $video_embed . '</div>';
    
    // get the video placement option
    $video_placement = get_option( 'tube_vc_video_placement' );

Then, go into “Appearance > Customizer > Additional CSS” or your child theme’s CSS and add the following which will assume 16×9 videos…

.tube-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.tube-video-wrap iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

2) [ALTERNATIVE SOLUTION] I believe if you install the wonderful iFramely plugin it’ll make your videos responsive without doing anything more.

Solution #1 worked like a charm thank you! There is one small issue though. I get small black bars at the top and bottom of all the videos, im assuming it has to do with a height adjustment. Let me know. Thank you.

EDIT: Remove the top padding…

BEFORE

.tube-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

AFTER

.tube-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

• This reply was modified 7 years, 5 months ago by tubegtld.

You might also want to add a little bottom margin to it.

Wonderful all good..thanks again!

Resolved

I will Say use Wp youtube Lyte It Increases the Performance