Responsive Video

http://mathis-nitschke.com/wp/airbus-group/


This video is embedded through your Featured Video field. But:
- it doesn't scale down when going tablet or mobile.
- if you scroll down, the video will go on top of the menu

What are more elegant solutions with responsiveness etc. ?

Thanks,
- Mathis

Try to add this code to css/override.css file (first enable this option from template options -> Advanced tab)

Code: Select all

#gk-mainbody article iframe {
   max-width: 100%
}

but I didn't notice the problem with video on top of the menu during scrolling (which browser's version are you using?)

Hi Piotr, curious. I just had to recreate this post - for whatever reason and I replaced the video to one from Vimeo and it doesn't show that Menu-behaviour anymore.

Thanks for the css-code. Better than nothing but I'd prefer a solution which also scales the height proportionally, so I don't get the black up and down from the video. Any hints?

Bests,
- Mathis

It's not so easy,

you can add additional css for height into css/tablet.css or css/mobile.css files:

Code: Select all

#gk-mainbody article iframe {
   height: 400px;
}

and specify your own height value.

you can also use this tutorial:
http://avexdesigns.com/responsive-youtube-embed/

Hi Piotr, from this tutorial:
"First you will need to add the following to your style sheet. "

Which css file is the one he is talking about? Can I put it in the override.css file?

Yes, you can use css/override.css file.

Cool, it works beautifully, thank you!