Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 31

Hybrid View

  1. #1

    Default Make Video Stretch to Width of Webpage

    Hello! I am on a Windows 11 PC, with XDP X version X 19.

    In the design gallery, I have chosen a ďmodern business websiteĒ template that is responsive.

    There is an image that stretches the width of the webpage when you view in the browser. I would like to replace that image with a video and have it stretch the width of the website.

    I see directions on how to go to Web sticky/stretchy for images. Is there something similar for video files? Iím using a stock video that is saved in .MP4.

    Here is a website that shows the look Iím trying to achieve with a video: https://www.asphaltpavingsystems.com/

    As always, I appreciate feedback from the experienced folks here.

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    16,975

    Default Re: Make Video Stretch to Width of Webpage

    Quote Originally Posted by hotrodsue View Post
    Hello! I am on a Windows 11 PC, with XDP X version X 19.
    In the design gallery, I have chosen a “modern business website” template that is responsive.
    There is an image that stretches the width of the webpage when you view in the browser. I would like to replace that image with a video and have it stretch the width of the website.
    I see directions on how to go to Web sticky/stretchy for images. Is there something similar for video files? I’m using a stock video that is saved in .MP4.
    Here is a website that shows the look I’m trying to achieve with a video: https://www.asphaltpavingsystems.com/
    As always, I appreciate feedback from the experienced folks here.
    Most use @Initiostar's excellent demo: https://initiostar.co.uk/demo/Video/banner.htm.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy

  3. #3

    Default Re: Make Video Stretch to Width of Webpage

    Acorn,

    Thank you so much. I had spent some time searching Google and the forum here. Figured someone had a tutorial.

    Sue

  4. #4

    Default Re: Make Video Stretch to Width of Webpage

    Quote Originally Posted by Acorn View Post
    Most use @Initiostar's excellent demo: https://initiostar.co.uk/demo/Video/banner.htm.

    Acorn
    Today, I finally have the opportunity to work with this demo, and making progress. When I get it the width of the page, then the height takes up more of the page than I want. Perhaps some preset elements of template I'm working in are hindering HTML code I've placed in header first, and currently in body placeholder. I still need to work on this some.

    As Iím working on layout, Iím putting an image in the top navigation bar area. Two things Iím noticing/have questions on. Let me know if I need to start a different thread.

    1) In Xara on the header and footer in the templates they are repeating. Iíve always been able to double click on header or footer and it would open in new tab to edit, save. Then that new tab closed and Iíll be back into my main Xara template page. I can still do that on older pages that I have saved, but on the new templates, like the one Iím working on now, when I double click, it does not do this.

    2) Below is a screen cap where I place logo image up in the header area. The screen cap shows logo ďLOMGĒ in the top left. It displays on the local host, but when I publish it, it is not showing up on the website. http://draft-review.com/

    Click image for larger version. 

Name:	Screenshot 2023-05-10 153315.jpg 
Views:	19 
Size:	120.7 KB 
ID:	133640

    Any thoughts would be greatly appreciated.

    Sue

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

    Default Re: Make Video Stretch to Width of Webpage

    Today, I finally have the opportunity to work with this demo, and making progress. When I get it the width of the page, then the height takes up more of the page than I want.
    For a banner video you need to have a video proportionally around 1920px (w) x 500px (h) or less (h); I think your stock video is maybe 640px (w) x 360px (h). You would need to crop the video top and bottom; I am not sure about the quality here, but this is an image at 1920px x 600px

    Click image for larger version. 

Name:	Surface 1920px-600px.jpg 
Views:	20 
Size:	66.4 KB 
ID:	133642
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

  6. #6

    Default Re: Make Video Stretch to Width of Webpage

    Quote Originally Posted by Initiostar View Post
    For a banner video you need to have a video proportionally around 1920px (w) x 500px (h) or less (h); I think your stock video is maybe 640px (w) x 360px (h). You would need to crop the video top and bottom; I am not sure about the quality here, but this is an image at 1920px x 600px

    Click image for larger version. 

Name:	Surface 1920px-600px.jpg 
Views:	20 
Size:	66.4 KB 
ID:	133642
    Gary,

    I appreciate your response, that makes sense. When I looked at it, it seem like I needed some off the top and the bottom.

    Do you know the best way to crop video top and bottom?

    Iím always happy to read or watch video tutorials. A quick search, I see Camtasia software which is $300. Looking for options before making any purchase.

    Thanks,

    Sue

  7. #7

    Default Re: Make Video Stretch to Width of Webpage

    Quote Originally Posted by hotrodsue View Post
    Gary,

    I appreciate your response, that makes sense. When I looked at it, it seem like I needed some off the top and the bottom.

    Do you know the best way to crop video top and bottom?

    I’m always happy to read or watch video tutorials. A quick search, I see Camtasia software which is $300. Looking for options before making any purchase.

    Thanks,

    Sue
    Gary,

    I have Movavi Slideshow Maker 8, and it can crop videos! Thought I may have ability with one of the variety of software I already have. There are codec and resolution settings that can be adjusted.

    The stock video is blurry, I will see if I can choose custom size and get clear video.

    Many thanks,

    Sue

  8. #8
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,566

    Default Re: Make Video Stretch to Width of Webpage

    Ignore the bot. There are a few ways to do what you're after, my way is:
    Upload the video file to your hosting taking note of the path (https://.....) and the name of the file.

    In Xara, create a rectangle the size you want the player to be, select it, then Utilities > Web Properties > Placeholder (tab) > HTML Code (body)
    Paste in the following:

    Code:
    <video controls="controls" playsinline controls autoplay disablepictureinpicture 
    poster="https://my-domain.com.au/sub-folder/Name-of-Poster.jpg" 
    width="100%" height="100%">
    <source src="https://my-domain.com.au/name-of-video.mp4" 
    width="100%" height="100%" type="video/mp4" />
    'Poster' refers to the first image before you press play.
    Change the "https://my-domain.com.au/name-of-video.mp4" to the path and name of the video file you uploaded.

  9. #9

    Default Re: Make Video Stretch to Width of Webpage

    Thanks for the reply.
    Chris, the code and how to do in Xara I understand, what I'm missing is how to upload the video to my hosting, or other in mp4 format. I'm using Magix online world, but I think it doesn't offer hosting service for mp4 video format. In my research I saw that I may have to use some platform like video.js, but it is a process that I'm not familiar with, so I must understand how it works.
    Or am I overcomplicating things? Sorry, This is all new ground to me.

  10. #10
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,566

    Default Re: Make Video Stretch to Width of Webpage

    Sorry, can't help with Magix hosting. I simply upload via FTP, but I presume that isn't an option for some strange reason.

 

 

Tags for this Thread

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
  •