Printable View
Hi all
Could someone please take a look at this.xar file and tell me how to make the movie at the top of the page continuously loop, and also explain why it doesn't auto start in Chrome.
You can see it here: actionitcs.com/realtime/
Thanks in advance
FIRST: As to Chrome... and auto-start videos.... it's a security issue with them and you have disable it... a quick search on Google will settle that. Although not helpful to 'other' viewsersQuote:
Originally Posted by actionit
of your website who just won't see the video... there may be a 'code' work-around for it...
This is what I'm using to do just what you said for the banner video in this website...
http://specialtydesserts.com/
don't ask me to explain... I don't know what the heck 75% means?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#myVideo {
position: fixed;
right: 0;
top: 0;
min-width: 100%;
min-height: 100%;
<! Changed 100% to auto to fit video height or leave at 100% to fill browser
}
</style>
<video oncontextmenu="return false;" autoplay muted loop id="myVideo"> video controls loop
<source src="index_htm_files/website header video converted.mp4"
" type="video/mp4">
oncontextmenu="return false;"
Your browser does not support HTML5 video.
</video>
</body>
</html>
It autostarts in Chrome here.
You can achieve autoplay loop by opening the Xara video widget HTML body and adding the words "muted loop" after "autoplay". Chrome will not 'autostart' if your video has a soundtrack, but even if it does not, I use 'muted' so Chrome starts the video without question.
By using the standard Xara widget, you have the video controls that come with it, but if you want to default to Chrome only video controls, you can insert code into a placeholder to achieve exactly the same outcome; you do however need to manually calculate the position you want the video to appear on the page, and how it behaves when you resize your browser. Here is the example code in action https://video.initiostar.co.uk/autoplay.htm along with codes for a video fill browser, full width video banner, and page width video.
The XAR file is attached (you need to change the video source to see it in action. There are though multiple ways to code the outcome, depending on how you want the video to resize when you resize a browser.
Hopefully, this helps you.
Best,
Gary
Actionit, it doesn't work for me in Chrome. However, in other browsers, I find that the video is wider than my browser if I'm not viewing at full screen, which I rarely do, so the video loads off-centre and the right side of the video is cut off. (See screen gab)
Using Initiosar (Gary) supplied examples I've managed to reduce the video placeholder to fit within your websites page's 1120 size. It works fine in FF, Chrome, IE11, Edge & Opera. However for some reason the video is slow to load on FF, perhaps because it's loading from your server, but this isn't the case in the other browsers.
One other thing I'd mention is that the video file your using is approx 1648px x 928 px but to fit within your webpage it's reduced to 690px x 388px so I'd consider creating a smaller video file to speed up loading time.
I attached my xar file based on Gary's coding.
Thank you everyone for your invaluable help again. Works great thanks Gary and Egg