Several questions (responsive content, video slider compatibility, etc.)

[gallow737]

Hi there. Got a few questions regarding some things. I’ve included URL and login info if needed. I should start off by saying that I recently got help adjusting my menu’s location on the header 10 sidebar with some custom CSS code so maybe that has something to do with one of these issues. Let’s get right down to it:

1) I’m employing Header 10 with the side menu and on smaller resolutions or collapsed browser windows (height wise anyways, width will fix the menu as a slide out option, but height adjustments will do this), the menu hovers over the social media icons and menu footer. Basically the menu isn’t being responsive once it reaches a certain height. It will shrink a bit but at some point it just stops. I kind of expect the font size to shrink but all it does is adjust the distance between menu items, not the size of the font. I assume it’s because the sidebar is designed so that it doesn’t scroll and perhaps it can be avoided with a smaller menu font, but my client will likely be adding more menu items in the future. Is this normal or is it something that can be addressed? I was giving a presentation to the clients and they only had a VGA connection to my laptop to look at it on a TV so the resolution was smaller than normal and it looked completely out of place. Just need to know if it’s a responsive issue or maybe it had something to do with the custom CSS that was given to me to move my menu up below the logo (there was a big gap between the menu and logo before)

2) Another responsive issue is on the media page I employed a audio player plugin, and it may just be that plugin is the issue, but on smaller resolutions or window adjustments, the plugin overlaps the image it sits next to. Is this a plugin thing or another responsive issue? If it’s a plugin thing then I’ll just look for another one, but I really like that plugin, but I understand if it’s out of control of anything you guys can help me with

3) The full screen video streams that drop down when you click on a video. It brings it up fine, but it’s not full screen (on Chrome anyway). I’ve employed this before on other sites and the videos load full screen, but as of right now when I load them up on my computer and browser, it drops down and loads the video but they are not full screen.

4) Also on the front page we employ a video in the Swift Slider. It looks great! However the video a) apparently only loads on Chrome and b) won’t load on the mobile site. For starters, we’re using a .webm video file. Would using a .ogg or .mp4 video file fix the cross browser compatibility issues? Or is this just a weird occurrence? Really need to know how to fix that. Also, are the video files not visible on the mobile versions? The overlay loads up but not the video (much like how it looks on Firefox). That’s one of the key issues is mobile compatibility for those video slides. If they won’t work on Mobile is there a way to exclude them on Mobile versions? Would I need to make a Mobile home page that Cardinal can detect and direct them to instead? I’m unsure of what to do there and could use some guidance.

Thanks for any and all help in the future. Hope to hear back soon! Thanks!

[gallow737]

I should mention I’ve taken some steps to solve the video issue by adding MIME types to my .htaccess file. My server includes webm in it’s MIME types automatically, so I’m not sure if that’s the issue. Was trying to figure it out on my own but the solutions didn’t work for me so I still need help with that, but wanted to mention I tried these MIME types in my .htaccess file:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

AddType audio/mpeg .mp3
AddType audio/ogg .ogg
AddType audio/mp4 .m4a
AddType audio/wav /wav

So if that was something I might be referred to it’s not working for me :/

[Mohammad – SUPPORT]

Hi,
really apologize for the delay in getting back to you. Please attach marked screenshot image about your responsive issues.
Thanks
Mohammad

[gallow737]

There’s nothing attached? I’m not seeing anything

[Mohammad – SUPPORT]

Hi,
You need to attach marked screenshot image for responsive issues. Hope you will understand.
Thanks
Mohammad

[gallow737]

Sorry, I misinterpreted. Also, if there’s anyway I could get an answer on the video browser compatibility issue next, that one is what my clients are super concerned about at the moment.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

1) Add this to your custom css:

@media screen and (max-height: 650px) {
.vertical-menu-bottom {
    display: none;
}
}

4) Yes to support all browsers you will need all 3 formats. Videos can’t autoplay on mobile, so it makes the whole sense of a video background pretty pointless unfortunately – that’s why we implemented a fallback to the image set in the row for mobile devices.

– Kyle

[gallow737]

Thanks! The CSS code worked perfectly!

I also uploaded the video with all 3 formats but I’m still getting the fallback image on non-Chrome browsers so that doesn’t seem to have worked either for me. I’m fine with it not working on Mobile devices, and my clients are, too, but we really would like to get this cross browser compatible here and nothing we’ve tried seems to be working.

Oh also, the site has been moved to live and it now at http://www.day6entertainment.com – the same login credentials as the site I included in the original post still exist.

[Rui Guerreiro – SUPPORT]

Hi,

Can you post the links of the videos in different formats in a private reply so we can check it?

Thanks
-Rui

[gallow737]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

The only problem that I’m seing now is the video ogg format has an incorrect format because the extension should end in .ogg not in .ogv like in your link.

So at the moment for the video just don’t work in Firefox.

-Rui

[gallow737]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

I’m not sure what is the problem. Will forward it to the development team.
Let’s wait for the reply.

-Rui