Video height on blog page

[DavidCollier]

I’m using the fluid grid setting on the blog/home page. I’ve put up several videos with the different width settings on the backend but all the videos end up the same height. The video width is fine but I’m ending up with small videos which have lots of black space above and below the video and large videos that only show part of the video.

Stuff like this http://yourejustzealous.com/wp-content/uploads/2016/07/Screen-Shot-2016-08-01-at-00.38.37.png

[FocuxTheme Support]

Hi

Could I check your website that will make me clear? I need to check the layout by Chrome developer tool and see what’s wrong with it.

Thanks

[DavidCollier]

This reply has been marked as private.

[FocuxTheme Support]

Hi

I improved oldcar.setup.js file, so you can download this changed file via https://www.dropbox.com/s/0e9t44qy3dwsip2/oldcar.setup.js.zip?dl=0 unzip it, and upload the js file to oldcar/js folder via FTP client, overwrite the old version.

Thanks

[DavidCollier]

Thanks that work great. I’ve another question about the blocks as well. If you check out the site again there’s a block less than half way down called ‘Smacht Trailers’ which is being covered by another block.

[DavidCollier]

Actually there are several of these problems with the blocks overlapping each other on the blog page.

Another question about the sing post pages. If I upload a video to the site with a dimension of greater than the width of the page it spills out over the size of the page. Is there a way to constrain the videos to the width of the page? I’m worried that less code familiar employees will use add posts with videos to the site which will only be partially viewable due to the width of the video. Here’s an example: http://yourejustzealous.com/st-patricks-amsterdam/

[FocuxTheme Support]

Hi

Could you post a screenshot to show the overlap issue? Because I checked it on Mac+Chrome/Firefox, it’s display as normal. Also, what’s browser you used? Or any steps I missed to reproduce the issue?

For the video size issue, please try to add the following custom CSS into OldCar options > Custom Code > Custom CSS

.blog-article-content iframe{
   max-width:100%;
   min-height:500px;
   height:auto;
}

Thanks

[DavidCollier]

That code worked great thanks.

The overlap I’m referring to is this: http://yourejustzealous.com/wp-content/uploads/2016/08/Screen-Shot-2016-08-03-at-17.27.23.png
In this screenshot the text underneath two of the videos is being hidden by the video below it.

I’m also experiencing some large empty spaces between the blocks: http://yourejustzealous.com/wp-content/uploads/2016/08/Screen-Shot-2016-08-03-at-17.30.01.png

I’m using Chrome ver. 51.0.2704.103

[FocuxTheme Support]

Well, I see. It seems when the page or images was loaded slowly, the issue was produced. Now, I’m rewriting the masonry layout and I will let you know the solution later.

Thanks

[FocuxTheme Support]

Hi

Please download this changed files, upload those files to your theme folder, overwrite the old files.

https://www.dropbox.com/s/b39sp51lxh2tc8g/update20160804.zip?dl=0

Thanks

[DavidCollier]

Hi John,

I’m not sure if it’s worked as it doesn’t include all the posts that were on the homepage. The ones which are there are not overlapping but several of the ones which were there are now missing…

[FocuxTheme Support]

Hi

I want to check your settings in WP admin, but the account which you created for me is not admin role, it’s only a subscriber, so I can’t see those options in WP admin, could you change my account as administrator?

Thanks

[DavidCollier]

I’ve updated it now.

[DavidCollier]

I’ve just changed the number of blog posts to show at any one time to 20 and all the posts are being displayed on the homepage again. Is it possible to make the posts displayed unlimited? Or some kind of page option so you can access older posts?

[FocuxTheme Support]

Hi

I found the reason. Because you have set the height of youtube iframe to ‘auto’, so when the new post loaded, the page can’t get the initial height of iframe, so please set the height of those iframe to 320 for wide box or 150 for narrow box in the future as below

<iframe width="100%" height="320"...></iframe>

I’ve already changed the height value of iframe for those published post and changed the number of posts to 9, now it seems working fine.

Also, please upload this changed file to js folder once more, because I’ve improved the page loading speed. https://www.dropbox.com/s/0e9t44qy3dwsip2/oldcar.setup.js.zip?dl=0

Thanks

[DavidCollier]

Hi, that seems to have solved the problem of the video on the homepage, but it’s causing the night of the videos to be extremely long on the individual posts, see: http://yourejustzealous.com/smacht-trailers/

It’s not happening on all the posts but on the other posts the height of the clips is not in the correct ratio to the width of the video.

[FocuxTheme Support]

Hi

You can try to control the video width and height via your embed code

<iframe height="400" width="720" src="https://www.youtube.com/embed/videoseries?list=PLwBzik7-yITbH5_dba2I1YhThErpAXSAQ&showinfo=0" frameborder="0" allowfullscreen></iframe>

If you don’t want to the video width looks so long, you can just change width=”100%” to 720 or any other value you want.

Check this again. http://yourejustzealous.com/smacht-trailers/

Thanks

[DavidCollier]

Yes that’s true, but now the video thumbnail on the homepage is the wrong size. Is there anyway that both videos can be the right size in their respective containers?

[FocuxTheme Support]

Strange, I checked the source code through chrome developer tool, I found your theme is different from the latest version of OldCar, the video wasn’t resized by javascript.

Could I reinstall the theme after you backup the old theme?

[DavidCollier]

Sure!

I’ve made a few changes to the code so maybe that’s causing it…

[DavidCollier]

The difference between the latest theme and the theme I have I mean. I was trying to solve the video height problem in the code

[FocuxTheme Support]

Oh, if I reinstall the theme, all your changes will lost. So, could I continue to do that?

[DavidCollier]

Yes that’s ok.

[FocuxTheme Support]

Hi

I reinstalled my modified version of this theme, please check again.

Thanks

[DavidCollier]

None of the videos are the right size now… Or is there something I’m missing?

[FocuxTheme Support]

These are my screenshots, I’m not sure there’s anything I missed. Please check.

https://www.dropbox.com/s/cqwjd9l0l1jqtyh/FireShot%20Capture%201%20-%20You%27re%20Just%20Zealous%20-%20Visual%20storytelling%20for%20m_%20-%20http___yourejustzealous.com_.png?dl=0

https://www.dropbox.com/s/3ql5cztcn22b4cl/FireShot%20Capture%202-%20Smacht%20Trailers%20-%20You%27re%20Just%20Z_%20-%20http___yourejustzealous.com_smacht-trailers_.png?dl=0

[DavidCollier]

I’m seeing this:

http://yourejustzealous.com/wp-content/uploads/2016/08/Screen-Shot-2016-08-14-at-18.52.23.png

http://yourejustzealous.com/wp-content/uploads/2016/08/Screen-Shot-2016-08-14-at-18.52.12.png

With the black boxes around the videos so the height isn’t adjusting properly.

[FocuxTheme Support]

Different videos has different height, so in this theme, I only forced the width of video but the height is not fixed, you can define the height of video through change height=”…” param in iframe tag for each video just as my previous reply. Do I make sense?

This is your embed code

<iframe src="https://player.vimeo.com/video/178080870?title=0&byline=0&portrait=0" width="720" height="402" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

You can control the video height through changing height value. I changed 402 to 300, please check, you will see the result after I redefine the height.

Thanks

[Author]

Posts