topic Re: Hubspot File Manager Breaks Transparent Video Files in CMS Development

Hubspot File Manager Breaks Transparent Video Files

matt_scott — Wed, 31 May 2023 10:40:13 GMT

I want to add transparent videos to my page but if I upload a working video to hubpsot it converts the file from the correct h265 encoding to the incorrect h264 encoding.

I've tried with the many formats but here is an example:
https://codepen.io/mortenjust/pen/BaLrjzm?editors=1010

The webm works for chrome fine.

The .mov file (or .mp4 h265 files) which are required for safari does not work

You can test this file
https://rotato.netlify.app/alpha-demo/movie-hevc.mov

This site has a handy tester so you can easily test the issue. (Open it in safari) https://rotato.app/tools/transparent-video

Download the file and just drag it into the website, you will see it's got a transparent background.

Now upload the file to hubspot, download it again and test in the same website. It's now lost it's transparency.

Thanks for your help,
Matt

Edit: Seems like there is no support, i've posted an idea here
https://community.hubspot.com/t5/HubSpot-Ideas/Support-for-Transparent-Videos/idi-p/801016#M145011

Re: Hubspot File Manager Breaks Transparent Video Files

Jnix284 — Wed, 31 May 2023 00:51:22 GMT

Hi @matt_scott based on your testing and reviewing the file in HubSpot files, it looks like there isn't a way to force the h256 encoding.

I suggest adding it to the ideas discussion here for the HubSpot product team to review, if you share the link back I'd be happy to upvote.

Re: Hubspot File Manager Breaks Transparent Video Files

CTurner8 — Wed, 31 May 2023 04:49:12 GMT

I'm sorry to hear that you're experiencing issues with transparent video files in HubSpot's File Manager. It seems that HubSpot's conversion process is altering the encoding and causing the loss of transparency in the video.

Unfortunately, as an AI language model, I don't have real-time access to the specific technical details or updates about HubSpot's File Manager behavior. However, I can provide you with some suggestions and potential workarounds:

Contact HubSpot Support: Reach out to HubSpot's support team directly and describe the issue you're facing with transparent video files. They will have the most up-to-date information on the capabilities and limitations of HubSpot's File Manager. They may be able to provide guidance or offer a solution to your problem.
Convert the video to a compatible format beforehand: As HubSpot may be altering the encoding during the upload process, you can try converting the video to a compatible format manually before uploading it to HubSpot. You can use video editing software or online conversion tools to convert the video to the desired format (e.g., H.264) with transparency preserved. This way, HubSpot won't perform any additional conversions that might affect the transparency.
Host the video externally: If HubSpot's File Manager continues to present issues with transparent videos, you can consider hosting the video on an external platform specifically designed for video hosting and embedding, such as YouTube, Vimeo, or Wistia. Once the video is uploaded to the external platform, you can embed it on your HubSpot page using the provided embed code or URL.

By following these suggestions, you may be able to work around the issue with transparent video files in HubSpot. However, it's essential to consult with HubSpot's support team for the most accurate and up-to-date information regarding their File Manager and its compatibility with specific video formats.

Re: Hubspot File Manager Breaks Transparent Video Files

matt_scott — Wed, 31 May 2023 10:39:37 GMT

Thanks, I've created the idea here
https://community.hubspot.com/t5/HubSpot-Ideas/Support-for-Transparent-Videos/idi-p/801016#M145011

Re: Hubspot File Manager Breaks Transparent Video Files

matt_scott — Wed, 31 May 2023 10:57:57 GMT

For now as my video didn't need any sound, I've converted it to a transparent animated webp though it requires using ffmpeg in terminal to do it.

(I didn't want to use a gif because it's over a minute long so it would be both awful quality and hundreds of megabytes big)

ffmpeg \
-i TransparentVideo.mov \
-vcodec libwebp_anim \
-lossless 1 \
-q 80 \
-preset default \
-loop 0 \
-an \
-s 296:640 \
-r 30 \
transparentVideo.webp

If you want to know what all of those settings mean i've listed them below, you can change the compression quality and framerate and video size etc

-i input file
-vcodec codec library used
-lossless (0 for lossless 1 for lossy)
-q quality 0 - 100
-preset not really sure if there are other options
-loop how many times to loop 0 = infinity
-an remove audio
-s size of video/image e.g. 1920:1080
-r frame rate e.g.25 = 25fps
homepage6.webp output file name

Re: Hubspot File Manager Breaks Transparent Video Files

Jnix284 — Thu, 01 Jun 2023 01:48:21 GMT

Awesome @matt_scott , upvoted!