[raili tParticipant]

Hi, I have a video in a content band for which I’ve specified the bottom and top padding to be zero and no margins. I’ve also specified the margins to be zero in the columns. So I can’t figure out why I’m getting a space under the video?

My webpage is railitaylor.com

Thanks for your help! -Raili

[Kosher KMember]

Hi There,

Can you please try adding max-height: 360px; to the column inline style at the bottom part of column editor,

Also, please make sure not to add empty line as I see a <br/> code right after the iframe code,

Cheers

[raili tParticipant]

Hey, Thanks for your help. So I added the max-height code and it didn’t make a difference. I ended up taking out the columns for the video because I realized it wasn’t centered. The reason I did that was because the video stretches to fill the screen until it’s played then it drops to the correct size. Is there a way I can fix this? I don’t want the video to fill the screen before it’s played- I want it to look like it will when it’s played. Part of the problem of it doing this is it cuts my head off. I tried the x video embed and it made the video GIANT- like it takes up the entire screen- even when played.

I’m also still seeing the space under the video- I tried the max height code with the content band and it didn’t make a difference. I don’t see a </br> under the iframe code??

Thanks again for your help! -Raili

[Kosher KMember]

Hi Raili,

If you want to center a video, you can just simply add a container into that video and define its maximum width, e.g max-width: 350px; should be the same as your video width,

Would you mind providing login access to your site so I can do a sample,

Cheers

[raili tParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey there,

Please add style="margin-bottom: -10px;" to your iframe to eliminate the space.

<iframe src="//www.youtube.com/embed/AP99tJdX_W4?rel=0&controls=0&showinfo=0&wmode=transparent" width="853" height="480" frameborder="0" allowfullscreen="allowfullscreen" wmode="Opaque" style="margin-bottom: -10px;"></iframe>

Thanks.

[wpStan.comParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello @nazsect,

Thanks for updating the thread! Your videos is displaying 80% of its supposed width because you have added some styling in the customizer, Appearance > Customize > Custom > CSS. You can either remove this or increase it to 100%. Please see the screenshot http://prntscr.com/7067vr

This is the code in your customizer. Feel free to increase it to 100%

.x-video .x-video-inner embed, .x-video .x-video-inner iframe, .x-video .x-video-inner img, .x-video .x-video-inner object, .x-video .x-video-inner video{
  left: 0%;
  width: 80%;
 height: 80%;
}

If there’s anything else, we can help you with, please let us know.

[wpStan.comParticipant]

Okay so that removes the space… But creates another problem, I don’t want my videos to display full size, I was provided the code you had me remove to get my videos smaller.

No matter what size I put in for the width and the height, the videos remain the same size.

Is there a way to make my videos smaller? (Preferably by changing the width and height) AND not have 2-3 paragraphs of space below each video?

2.) Also I prefer NOT to have extra black space in my actual video either on the Top and Bottom or on the sides. I like when the YouTube video fills up the entire YouTube Screen as seen below.

Video Full Size in YouTube: http://prntscr.com/70ajhk

Video with black space on Top and Bottom: http://prntscr.com/70alhd

In Summary:

*If I make everything 100% there is no space below video, but I cannot resize video it remains full size

*If I keep everything at 80% I get 2-3 paragraphs of space below video, but video is now smaller

*If I keep width at 80% and make height 100%, that’s when I get the black space on top and bottom as seen here: http://prntscr.com/70alhd

[RadModerator]

Hi there,

You mean you don’t wish your video not to be responsive (eg. adding static width and height) ? Then you should not use video embed shortcode, you can just paste your youtube embed directly to your content or by using text shortcode. Without video embed shortcode, you can control its width and height.

And about the black spaces, it’s added by youtube itself to maintain their aspect ratio. You don’t want to see a long headed people from the video because you stretched your video width. And also remember that videos have different sizes too, and each sizes has it’s own corresponding black spaces. Like vertical videos as their black spaces are on left and right.

If you wish to remove those black spaces, then your only option is to create your own player, or host your own video as HTML5 Video.

Thanks.

[wpStan.comParticipant]

Thank you for your response. I appreciate your help.

I never stated I don’t want my YouTube video to be responsive. I just would like to be able to control the size AND Not have 2-3 paragraphs of empty space underneath the YouTube video. (I don’t think that is unreasonable)

w/out the embed shortcode, Youtube videos appear distorted, I assume that’s why you guys created the shortcode. (For the record I like the shortcode as I do not want my videos to appear distorted)

It appears what I want to do cannot be done with this theme exactly, I’ll just have to choose the lesser of 2 evils I guess, thanks again. 🙂

[Rue NelModerator]

HI @nazsect,

Sorry if things doesn’t works out for your end. Did you know that you can also have something like this in your video embed?

[x_video_embed type="16:9" style="max-width: 450px; margin: 0 auto"]<iframe id="_dytid_4770" src="https://www.youtube.com/embed/12Dh9ppOlWg?wmode=transparent" width="360" height="115" frameborder="0" allowfullscreen="allowfullscreen"></iframe>[/x_video_embed]

You can add inline styles in your video embed. to limit the maximum width at would align at the center of the page. The 2-3 paragraph empty space you are talking about is not in the video embed but in your paragraph. There were some line breaks in there and that is why there are empty lines. If you may, you can provide us the url of your site with access info (just set it as a private reply) and we can fixed it for you.

Hope this helps. Kindly let us know.

[wpStan.comParticipant]

Perfect!!! I can’t thank you enough, that simple extra style style="max-width: 450px; margin: 0 auto"

Made all the difference 🙂

I am now able to set the size of the video, NOT have 2-3 paragraphs of extra space below the video and also have no extra black space in the video. This solves my issue perfectly.

Again thank you!!

For those searching this issue, the exact code I’m using is below.

[x_video_embed type="16:9" style="max-width: 560px; margin: 0 auto" no_container="true"]
ACTUAL VIDEO CODE HERE[/x_video_embed]

Link to my page: http://naz-sect.com/has-the-blurred-lines-case-put-creativeness-in-jeopardy/

[NicoModerator]

Thanks for the tip! 🙂

Have a great day! 🙂

[Author]

Posts