Jump to content

video transparency and fallback

Recommended Posts

Hi,

I'm overlaying 2 videos over one another. These videos have an alpha channel and I've properly encoded them to do so. Raw files work a treat. This is my code which I have inserted in to a code block:

<video class="tape" width="100%" autoplay loop muted playsinline>
    <source src="https://mrwatt.co.uk/s/Cassette_hevc.mov" type="video/mp4">
    <source src="https://mrwatt.co.uk/s/Cassette_webm.webm" type="video/webm">
</video>

However, I'm having issues in terms of transparency with different browsers, such as Chrome and Edge

Issue:

The code above plays absolutely fine, with no problems, across most the popular browsers on my Macbook and iOS devices (Safari, Chrome, Firefox).  However, on Windows PC we have either a lack of transparency or no video at all. I experimented using the webm version alone and this fixes everything on Windows PC, but as there is no hevc video the webm doesn't work on Mac.

So it's clear to me that the browsers aren't pulling the format it requires. Can anyone shed some light as to where I'm going wrong?

I also tried to include the codec tag to but with no avail, as in:

<video class="tape" width="100%" autoplay loop muted playsinline>
    <source src="https://mrwatt.co.uk/s/Cassette_hevc.mov" type="video/mp4;" codec="hvc1">
    <source src="https://mrwatt.co.uk/s/Cassette_webm.webm" type="video/webm;" codec="vp9">
</video>

Thanks

Here's my site to see it in effect: mrwatt.co.uk

Edited by mrpower
adding url
Link to comment
  • 4 months later...
  • 2 months later...
On 4/3/2024 at 1:16 AM, filipcar said:

Hi did you find a solution? I'd be very interested as I am working with the same code.

What is your site URL? the OP has changed their site to different providers

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.