0

I created this single page site (https://pixelwatch-bycliff.web.app/) using HTML, CSS and JS but I thought of going extra by adding this video clip (https://www.pexels.com/video/multi-colored-vapor-1943483/) to the text (Wear OS) so the text would be vibrant while coming to life with the video. PS: I've tried doing it myself but can't get it to work, any help right now would be greatly appreciated.

Link to the files on github: https://github.com/ManLikeCliff/pixelwatch-bycliff click to view the text

4127157
  • 1,438
  • 2
  • 15
  • 28
ManLikeCliff
  • 11
  • 2
  • Cool design :-) What exactly do you mean by "add video to text"? Add where, how? Can you give an example? Also, you should provide your own research, what code you have tried... – ΔO 'delta zero' Aug 25 '21 at 20:54
  • 1
    Please could you put a code snippet into your question which we can run to see the problem. In particular how are you inserting the video? – A Haworth Aug 25 '21 at 20:55
  • Thank you , here's an example of what I'm trying to do https://codepen.io/corvus-007/pen/vYEXLmg but in my case I want the video (not the swan own) to be inside the Wear OS. I'll try updating this with the code I've tried when I get back home. – ManLikeCliff Aug 26 '21 at 17:42
  • It worked for me by adjusting the font size. I replaced the swan with the video you wanted. See here: https://codepen.io/sgruenwald/pen/KKqdpQe – Stefan Gruenwald Aug 28 '21 at 00:07
  • Y'all the best, thank you once again. I used Stefan's codes to adjust mine and it worked. – ManLikeCliff Aug 29 '21 at 19:29

1 Answers1

0

I think there are two ways for you to achieving it.

  1. Making the text with overlayed on the video as .gif format. That is, you are basically inserting image file.

  2. I believe you wanted to do with CSS. Then, you might as well think of layout wisely.

First, make your video goes back to the text. In this case, video could be set as a background. Then, give z-index to the overlay text above by giving position: absolute; attribute.

If you want, you may check here

Apensia
  • 70
  • 9