- This topic is empty.
January 29, 2015 at 4:42 pm #194655
Here is the layoutht
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!January 29, 2015 at 11:05 pm #194659
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).January 30, 2015 at 12:49 am #194661
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?January 30, 2015 at 1:01 am #194662
Yes IE doesnt support object-fit.January 30, 2015 at 1:52 am #194665
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.January 31, 2015 at 3:19 am #194744BeverleyhParticipant
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 :(January 31, 2015 at 12:14 pm #194791
Thanks Beverly,,those links are useful and exact answer. i just need to tweak the image to replace with video.
Also thanks shaneisme and ShikkedelFebruary 3, 2015 at 12:33 am #194945
- The forum ‘Other’ is closed to new topics and replies.