Useful HTML Code for Autoplay Video Placeholders

Maybe others will find this HTML autoplay code useful for inserting videos. I have attached my '.xar' file where the placeholder widgets (body HTML) can be edited with your own video sources. You can of course copy and paste the placeholders.

Demo at https://video.initiostar.co.uk highlights the HTML code used in the Body section of each placeholder and the effect it has. For https, you may have to change the standard .htaccess file. In my case, the .htaccess code change is shown on the first page of the '.xar. file.

Initiostar, no XAR file but your video demo website mostly does the job.

Acorn

Apologies xar now attached

Quote:

---

Originally Posted by Initiostar

Apologies xar now attached

---

Most kind.

Acorn

Hi,

I'm trying to implement your code you provided, and the video is only displaying full browser screen. I want full banner width.

Thanks in advance

To create a video banner similar to the one seen in the demo, you would crop your original video to something like 1920px x 500px (or to a height that retains the content you want to display). There are many video editing tools, but I used https://cropvideo.co/. I am sure there are other ways to achieve the same effect, but you want to avoid distorting your content. Hopefully, this helps.

Thanks for the reply. I'm unable to get the video how I want it. I've used that website to re-size the video, but it still wont stretch browser width (browser width for website is set to 1200) and its' taller than the size I changed it to. I even made it 1920x300 but still to tall.

Hi Koko,

I ran the code for the banner-width video, screenshot attached. The start point was a video 1920px x 1080px, which I reduced to a height of 144px; the result is in the image. I tried different page widths, but as expected this has no bearing on the result in this case.

Can I suggest you check your code (which is shown in the attached image); it is different from the code used to fill a page width, which was the first example in the demo.

Rdgs Gary

Hi,

I'm at a standstill. I'm really stumped on this. I cannot get it to maintain 300 in height. .web file attached in a test website using the placeholder with your code. Video is hosted on my server.

I can see your issue, it looks like the video has been stretched in the crop, playback appears to show the full video, rather than the intended crop.

If you add the original video source in your test.web, I maybe able to help. Unfortunately, what you may find with your video, is that cropping it (taking a horizontal slice) will loose its context. The code seems to work on any other 1920 x 1080 source.

Hi,

The original video was a .mov file 228mb. I've converted it to a mp4. Its now 37mb, and uploaded to my server.

I get a full black screen when I load your new '.web' file? I'm happy to give it one more try, but best I work from your original video. Not sure how we do this in TG (@ .25Gb file sizes), but if TG rules allow, send me a PM to facilitate transfer of your original video. Good video btw.