asked on

Need to make a video larger -- using css on a website.

I have a WordPress site with a video gallery plugin that is pretty good, except for one issue. I am hoping it can be fixed with CSS -- and not any changes (if possible) in the html.

Here's a link to the page. Link to website (work in progress).

On the home page you will see a row of 3 videos. Starting with a title "Gift Wizard...." Each video has black bars on the right and left. I want to enlarge the videos so that they fit full size in the div without the black bars..

I have attached a screen capture of how it looks now - and how I want it to look hopefully with just a css fix. The controlling css file appears to be named player.css

I don't just want the videos wider, I want them taller, keeping the same aspect ratio height x width -- filling the full width of the div -- as well as making the video taller -- without distorting it.

Also it needs to work on cell phones.... :)

It appears that each video is in a div titled div.id="player" or "vp-video-wrapper transparent" If necessary I will go into the code and make any html adjustments -- but I prefer a css solution if at all possible. :)

Thanks!
Rowby

Pankaj Jangir

You can edit this class as per your wish: http://prntscr.com/p62z39.

To show the video thumbnail properly, you also need to increase height of the boxes.

Rowby Goren

ASKER

Hi Pankaj,

Thanks for helping me on this.

I looked at your example. Even though the original css seems to be coming from Vimeo.com, it appears that you were able to override the vimeo css settings locally?

So would I just need to add your css to my local custom css file?

Secondly, I am not sure how to handle the "element style" css in your example. Any thoughts on that. I am assuming that the wordpress plugin is generating that -- meaning I may have to somehow fix that code to also be hard coded in the plugin instead of the css??

Thanks again, and I'd appreciate any of your thoughts about this.

Best,
Rowby

Pankaj Jangir

Use !important next to max-width in your own CSS file.

Example code:

.player {max-width: calc(251.778vh !important)}

Open in new window

Kindly update me if this helped you.

lenamtl

Hi,

I had the same issue recently
The black borders need to be fixed using the tool you use when creating the video for example in Camtasia directly.
For Camtasia we need to set it to 100% in settings (right section) and when we generate MP4 select FIT

If you are not using Camtasia check in your video tool.

If your are not the author of the video you want to share,
you can try to use % instead of fix value for the video div then it will adapt to the column / div, but chance that it won't remove the black border but it worth a try.

For cell phone compatibility using vimeo it usually ok , if you have the video on your server then make sure to create several version.
Also make sure to use a poster so at least they will see an image

<!-- Using multiple sources as fallbacks for a video tag -->
<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
<!-- Poster hosted by Wikimedia -->
<video width="620" controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" >
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi">
  Your browser doesn't support HTML5 video tag.
</video>

Open in new window

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Multiple_sources_example

I just tried it and set style="width:100%" and remove max-width, max-height of the video style

Rowby Goren

ASKER

Hi lenamtl

Thanks for your comment.

The videos are in my Vimeo account, and I uploaded them to vimeo. The original videos did not have black borders.

The code that shows up via Firebug is located on Vimeo -- both html apparently and css. I tried to get Pankaj Jangir's important to fix it, but it didn't seem to work. There are several places to add css in Wordpress, including the video plugin.

Part of the complication is I am using a wordpress plug in to pull in the videos. I have sent Pankaj Jangir's suggestion to the plug in developer to see if they can insert it into their code in the correct place.

I'll update their response.

Thanks!
Rowby

lenamtl

Hi,

ok check this https://enviragallery.com/docs/video-addon/#envira-gallery-videos-gallery-faq-black-bars

Rowby Goren

ASKER

Hi lenamtl

Thanks for digging into that webpage. I think I tried that before. But just to be sure, I went in and tried it again. The numbers I enter (with or without px at the end of the numbers, are not affecting the videos at all.

Just to be sure I cleared and purged Wordpress's cache. The gallery has its own tools that reset things, and I tried that.

The gallery support has been pretty good -- and if it wasn't for the weekend they would have responded by now. They still might.

We'll see!

Rowby

ASKER CERTIFIED SOLUTION

lenamtl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rowby Goren

ASKER

Hi

The app developer confirmed that this is a limitation of their app and they will look to fix this in their next upgrade. For now it's hard coded and not an easy fix for them to do.

Thanks!

ROwby