Can we make the menu on hover opaque instead of transparent? It is hard to read the menu items on the transparent background. Thanks.
Notified 12 people
Veronica Alvarado,Project Manager
Am I correct in thinking that you are referring to the dropdown mega menus?
Notified 2 people
Connie Wisdo
Yes I am, Veronica. Sorry for the delay in responding.
Notified 2 people
Ryan Ross,Developer
Connie
Veronica
Blake
I've adjusted the menu backgrounds to be solid, as well as moved the home page video beneath the menu bar.
Notified 3 people
Connie Wisdo
Ryan this looks great!
One minor issue. Do you see the thin white line that now appears below the menu on the landing pages? I think we want the image to appear to bleed into the menu, so can you adjust to remove the white space separating them now? See below:
Also, I uploaded a new version of the video yesterday (version 4a). Can you please replace the existing video with the new one? In version 4 a we adjusted a couple of video clips in which people's heads (the clip containing the dancers ) and the statue of the Virgin Mary were getting cut off.
Thank you! Connie
Notified 3 people
Connie Wisdo
Actually, Ryan, we just looked at the site again, and I still think you are cutting off too much of the top of the video. Can you adjust it downward so that you are cutting off more at the bottom and showing more at the top?
Thank you, Connie
Notified 3 people
Ryan Ross,Developer
Connie, this can be done, yes. I thought I would take a moment to illustrate a bit on what's happening. What we have here is not quite a square-peg-round-hole, but more like a small-rectangle-thin-rectangle situation. A matter of ratios.
Consider that the video is approximately 9:5, and the space the video is placed varies, but we know it's much wider than it is tall. On a wide monitor such as these screenshots, it works out to approximately 17:5. On this first screenshot, here I'm showing what the video would look like with no part of the video cut off.
In this second screenshot, I'm showing the video set to "cover", which is how it currently is. The site will stretch the video as wide as it needs to in order to fit the width, scaling the video proportionally. This will result in part of the top and part of the bottom not being visible.
In this third screenshot, I've adjusted the position of the video to be "up" 20%. 0% is the very top, 100% the very bottom, and default is 50% (middle/center). So here object-position: 50% 30%. As you can see, the same "amount" of video is shown due to the available space, but the video is shifted up.
Another way to visualize this is to "expand" the video to show the hidden or cut off portion, in relation to the viewable area. The red outline in the following two screenshots are the same exact size, simulating what is viewable on the home page. The first is the default 50% 50% version, followed by the shifted up 20% version, 50% 30%. Hopefully these illustrations help you understand and visualize what I mean by "sweet spot" of the original video and how that relates to the viewable area on the site.
1) The 1px line that was showing up in Chrome has been fixed.
2) I've swapped the video to be the recent 4a version.
3) I've added object-position: 50% 30% to the video element itself, so it can be edited conveniently via Developer Tools (F12) for experiment purposes.
4) The original video you provided was MPEG-2 codec (don't worry too much if you aren't familiar with this). Long story short, MPEG-1 and MPEG-2 can't be used with HTML5 video. I wound up converting the video to MPEG-4 (.mp4) and shrunk that down a bit with http://www.videosmaller.com/. From a site performance and user experience perspective, it's going to be rather advantageous to keep the videos to the smallest possible physical size.
I've adjusted the menu backgrounds to be solid, as well as moved the home page video beneath the menu bar.
One minor issue. Do you see the thin white line that now appears below the menu on the landing pages? I think we want the image to appear to bleed into the menu, so can you adjust to remove the white space separating them now? See below:
Also, I uploaded a new version of the video yesterday (version 4a). Can you please replace the existing video with the new one? In version 4 a we adjusted a couple of video clips in which people's heads (the clip containing the dancers ) and the statue of the Virgin Mary were getting cut off.
Thank you!
Connie
Thank you,
Connie
Consider that the video is approximately 9:5, and the space the video is placed varies, but we know it's much wider than it is tall. On a wide monitor such as these screenshots, it works out to approximately 17:5. On this first screenshot, here I'm showing what the video would look like with no part of the video cut off.
In this second screenshot, I'm showing the video set to "cover", which is how it currently is. The site will stretch the video as wide as it needs to in order to fit the width, scaling the video proportionally. This will result in part of the top and part of the bottom not being visible.
Another way to visualize this is to "expand" the video to show the hidden or cut off portion, in relation to the viewable area. The red outline in the following two screenshots are the same exact size, simulating what is viewable on the home page. The first is the default 50% 50% version, followed by the shifted up 20% version, 50% 30%. Hopefully these illustrations help you understand and visualize what I mean by "sweet spot" of the original video and how that relates to the viewable area on the site.
A couple of things to catch up on.
1) The 1px line that was showing up in Chrome has been fixed.
2) I've swapped the video to be the recent 4a version.
3) I've added object-position: 50% 30% to the video element itself, so it can be edited conveniently via Developer Tools (F12) for experiment purposes.
4) The original video you provided was MPEG-2 codec (don't worry too much if you aren't familiar with this). Long story short, MPEG-1 and MPEG-2 can't be used with HTML5 video. I wound up converting the video to MPEG-4 (.mp4) and shrunk that down a bit with http://www.videosmaller.com/. From a site performance and user experience perspective, it's going to be rather advantageous to keep the videos to the smallest possible physical size.