Most use @Initiostar's excellent demo: https://initiostar.co.uk/demo/Video/banner.htm.
Acorn
Most use @Initiostar's excellent demo: https://initiostar.co.uk/demo/Video/banner.htm.
Acorn
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
Acorn,
Thank you so much. I had spent some time searching Google and the forum here. Figured someone had a tutorial.
Sue
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/
Any thoughts would be greatly appreciated.
Sue
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 600pxToday, 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.
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
Sue, I wouldn't crop and remaster any video, there is an easier method.
CSS - Cropped hero Videos.xar
Put a Placeholder in position on the page.
Its width is unimportant as it is going to be Stretched.
Next decide on its height. I chose 240px.
Add its <video> Tag to the Placeholder Body:
<video autoplay loop muted playsinline id="heroVideo"><source src="https://cdn.glitch.me/94aeb0f1-3796-4bdf-acdd-ccba5a23cfbf%2Fdesktop.mp4"></video>
Check it runs and loops in Preview. Ignore its position or size at the moment.
In the Placeholder Head, add:
If you intend to run more than one (don't), but if you did, change heroVideo, to be different for each one.Code:<style> #heroVideo { position: fixed;; min-width: 100vw; height: 240px; object-fit: cover; object-position: 50% 50%; } </style>
My example has different values set for the object-position:
- Red: #heroVideo-top { object-position: 50% 0%; }
- Green: #heroVideo-middle { object-position: 50% 50%; }
- Blue: #heroVideo-bottom { object-position: 50% 100%; }
Obviously tune yours to suit.
The Placeholder can be move up or down the page.
The Hero Video stretches from this position.
If you include a single Variant, then even if not including a Hero Video (don't), then you need to add transform: translate(-50%); to the CSS style code.
Acorn
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
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:
'Poster' refers to the first image before you press play.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" />
Change the "https://my-domain.com.au/name-of-video.mp4" to the path and name of the video file you uploaded.
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.
Bookmarks