Welcome to TalkGraphics.com
Results 1 to 8 of 8
  1. #1
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Full Browser Width Video Background HTML/CSS

    I am trying to source/identify the correct HTML/ CSS to display an autoplay loop banner video such that it extends to the full width of the browser.

    Right now, it sits perfectly on the page (1200px wide) and I can crop the height of the video no problem to my chosen pixels to achieve a banner. The effect I am trying to achieve is similar to: https://www.thewatermansbarnes.co.uk, but in this case resizing the browser maintains the height of the video, rather than retaining its correct aspect.

    My test site is http://www.design.initiostar.co.uk which works great, without the usual Xara video controls. My XAR file is attached.

    Any help much appreciated; I looked at the various W3C options and could play around with these, but I am assuming someone has already solved this issue.

    Thanks,

    Gary
    Attached Files Attached Files

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,489

    Default Re: Full Browser Width Video Background HTML/CSS

    What about someone who is using a 32" display or larger?

  3. #3
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Full Browser Width Video Background HTML/CSS

    The video is 4K and the attached image is from my 4K desktop display. What I want to achieve is the video occupying the full width of the browser window,(i.e. it extends beyond the page boundary regardless of the page width). I know it can be achieved, just not sure of the correct HTML/CSS to do it. Thanks Gary
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	Screenshot (11).jpg 
Views:	44 
Size:	27.5 KB 
ID:	123929  

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Full Browser Width Video Background HTML/CSS

    Here's a solution that may help. It's from Sirans post on a similar issue but I can't find the thread at present. I've just copied pasted parts of Sirans xar file into yours. In FF for some reason you need to refresh the page to get the video, probably because I'm mixing things up but you should be able to get it to function. Nice seamless wave video by the way

    Note the use names such as:

    htmlclass=xw_stretch_stick
    htmlclass=xw_stretch
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  5. #5
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Full Browser Width Video Background HTML/CSS

    Thank you for the advice.

    I have amended my HTML to create a video page-fill, video browser-width banner and a video browser-fill. Updated at http://www.design.initiostar.co.uk. Yet to make them render better on a mobile with @media

    Now looking for HTML code to push a footer to the bottom of the browser window. Any help much appreciated and happy to share the code.

  6. #6
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Full Browser Width Video Background HTML/CSS

    Looking good
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  7. #7
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Full Browser Width Video Background HTML/CSS

    Doesn't Auto fit to page work?
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	export.png 
Views:	48 
Size:	12.7 KB 
ID:	123937  
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  8. #8
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Smile Re: Full Browser Width Video Background HTML/CSS

    I looked at Auto Fit before, but found I could not get the desired results; has always seemed better to create a genuine variant and manually adjust content to fit. I did this for my main site https://www.initiostar.co.uk.

    Got the code to have the Footer always at the bottom of the browser, so the look and feel of the demo site looks better. Put some content on the video-fill browser page too. Learnt a few things today on the way! Here's the result http://www.design.initiostar.co.uk.

    Suggestions, as always, welcome.

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •