Anyone know any tutorial how to do this website?

[cyberjo50]

Here is the layoutht
http://www.dadaabstories.org/.

Im searching in google how, but most of them are plugin
and the plugin is full screen. the sample on the website is full screen but still have their content at the bottom without having the video in fixed position.

Here is my goal layout: http://awesomescreenshot.com/0fa4atfpec

Anyone knows a good tutorial or a sample code i can follow?

Thank you in advance!

[Shikkediel]

Unless I’m missing the point, this is simply done by giving the element 100% height – and without using fixed position. Actually, the site does it kinda wrong… position is static there but extra positioning is defined anyway (which really is to no effect then).

[cyberjo50]

I did some more digging earlier and found that object-fit does the trick. The issue is browser compatibility here. now im looking for alternatives for object-fit. so far i found polyfill jquery.

do you know any alternative for object-fit?

[Shikkediel]

I think media queries or some basic JavaScript scaling calculations could do the trick. Is there a need to support older browsers somehow?

[cyberjo50]

Yes IE doesnt support object-fit.

[Shikkediel]

I meant in connection with using a polyfill… Basic CSS, supported from IE9 on and maybe some JavaScript could create such a layout.

[shaneisme]

Just keep in mind it’s very probable that the video will be cropped in many scenarios.

You can essentially do this CSS-only: http://avexdesigns.com/responsive-youtube-embed/

I used this technique to create a custom modal for YouTube videos. With a little tweaking you’re good.

This is a good jQuery option to make it work as a background: http://www.seanmccambridge.com/tubular/

I’ve also used this on production sites so I know it works well.

[Beverleyh]

I’m snowed-in at the mo and unable to get to a desktop so please forgive me if I’m misinterpreting your description and the links that the good fellows here have already posted, but maybe you can combine techniques from these 2 threads? They’re CSS-only if that floats your boat.

Full screen image with content underneath: http://www.dynamicdrive.com/forums/showthread.php?77817-Responsive-Fullscreen-Background-Image-Please-Help&p=310480#post310480

But replace the image with video from here: http://www.dynamicdrive.com/forums/showthread.php?77643-Responsive-video-element&highlight=Fullscreen+background+video (I’ve linked to the start of the thread because there are some thoughts and considerations along the way)

I haven’t tried to combine these ideas but maybe you can take something from them while I’m stuck on mobile :(

[cyberjo50]

Thanks Beverly,,those links are useful and exact answer. i just need to tweak the image to replace with video.

Also thanks shaneisme and Shikkedel

[cyberjo50]

Here is what i got so far:
http://jsfiddle.net/cyberjo50/4g660jgz/

I can’t make the bottom content to stay exactly where the box starts.

[Author]

Posts