inculding a video with transparency on a website - html

I have some cinema4D animations with a transparent background that I want to put on a website. I exported the animation as single .pngs (with an alpha channel) and put them in adobe premiere and exported them as .webm
I work with brackets, but when I include them in the code, they either don't show up at all, or with a black background.
What am I doing wrong?

Why you don't try transparent GIF
You can make it in photoshop (from png sequences) and use it in your website.
Make sure to export with transparent background!

Related

problems with background when adding SVG image to the website

I have svg image with transparent background (from inkscape, I have checked its transparency, I am 100% sure its transparent). When I add it to the website using , it automatically adds a white background, so it is no longer transparent. Does anyone know why?
Try opening the SVG file in Figma, if a white background appears remove it from the rest of the parts and save this edited one. Works all the time!

HTML video tag different background-color on different machines

I have web App where a video is being played, the video and the web page have being set to the same background color however the video background appears different on different machines same browser. What I want to achieve is to have a video of a spinning triangle on a grey background color similar to the web page background color.This what I get on different machines instead from hp Probook 445 G7 from hp elitbook 8470. The images are from the same web App but the firsr image has a darker video background unlike the second one. What could be the cause and how to fix it.
Thanks
I've tried to solve a similar issue without success.
Went as far as saving out a transparent background in video which did not turn out to be a viable solution.
My thought is the white balance on your computers change the light gray/white color values slightly.
I've also noticed the exact same hex or color values exporting slightly different in video than with svg or png backgrounds. I've battled that by using a gradient of a background to soften the edges so it appears seamless.

removing white background on images in flash

I have removed the background of an image I am using in photoshop. Even when i export the image in flash theres no white background but everytime I add a motion tween to the image, the white background comes back so when I put it on my website you can see the white background.
Is there anyway to stop it from doing this
Firstly, ensure the image does not include a background. Saving as a PNG often helps importing into Flash.
Then ensure the following publishing settings:
Choose File > Publish Settings. Make sure that HTML is selected.
Select HTML.
Choose Transparent Windowless from the Window Mode menu to make the SWF file's background disappear in browsers that support this feature.
Publish the document.
https://helpx.adobe.com/animate/kb/transparent-background-swf-file.html

transparent gif doesnt show transparency over background with gradient in css

I have a GIF picture with transparency. When I place the picture in a regular HTML the transparency shows fine. But when I load the same picture as a logo in a PHP software, the picture doesn't show the transparency but a white background.
The only strange thing I find in the page on which I load the picture which doesn't show the transparency, it has a gradient color background in CSS. I don't know if it's related to the problem or not.
What reason could there be that the GIF shows the transparency in some pages and in other pages it doesn't? Whatever the reason is, what can I do to make it work where I need it?
what can I do to make it work where I need it?
I would use a .png instead a .gif as logo you will probably load it through css
(background: url(path/.png) no-repeat; , I know it does not answer the why but solves the issue for sure.
If a .png is too big in your opinion use the online great tool it uses even advanced lossy compression for PNG images and preserves full alpha transparency

How to put .ogg video behind .png image with HTML5 and CSS3?

Everything I try, including z-index (using position:absolute; also), is not working. I want a .png image to go over top of a video, with the video behind also visible through transparent parts of .png file.
There you go: http://jsfiddle.net/MZm4b/