How to Edit my HTML Video Background

Design help General
1

Chrome version >> 44
Screenshots >> Below
Read-Only Link >> https://preview.webflow.com/preview/mojobas?preview=d84eb1058824db061d7da821cdae29b6

  • I would like to know how to mute the video automatically.
  • Is it possible to add a dark overlay to may text on top of it more clear?
  • Is it possible to make it viewable on mobile? I just see a play button.

I used this code:

<video autoplay loop style="width:100%; height: auto; position:absolute; z-index: -1;">
  <source src="http://dl.dropboxusercontent.com/s/nvnmasp68x55oqj/Meltdown_-_Multi_Player_Action_Game_from_Galaxy_Multi_Rides.mp4" type="video/mp4" />
  <source src="http://dl.dropboxusercontent.com/s/nvnmasp68x55oqj/Meltdown_-_Multi_Player_Action_Game_from_Galaxy_Multi_Rides.mp4" type="application/ogg" />
  <img src="http://www.dropbox.com/s/vs53wgqm857rm51/video-bg.jpg?dl=0">
</video>
2

You are looking for the <video muted> attribute.

The autoplay attribute does not work in Safari and Opera, or in mobile devices like iPad and iPhone.

You can style the embed element like any other element.

1 Like
3

Thank you for the reply.

Where would I add

4

Here you go :smile:

  <video autoplay loop muted style="width:100%; height: auto; position:absolute; z-index: -1;">
  <source src="http://dl.dropboxusercontent.com/s/nvnmasp68x55oqj/Meltdown_-_Multi_Player_Action_Game_from_Galaxy_Multi_Rides.mp4" type="video/mp4" />
  <source src="http://dl.dropboxusercontent.com/s/nvnmasp68x55oqj/Meltdown_-_Multi_Player_Action_Game_from_Galaxy_Multi_Rides.mp4" type="application/ogg" />
  <img src="http://www.dropbox.com/s/vs53wgqm857rm51/video-bg.jpg?dl=0">
</video>
1 Like
5

Thanks a bunch!

How would I go about adding a regular background just to mobile since it can’t play background video?

One more thing, I tried what you said and I can’t make the background darker. :frowning:

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.