Как сделать анимированный задний фон? React/CSS

Всем доброго вечера! Помогите пожалуйста, создаю сайт и хочу на задний фон поставить анимацию-гифку. Есть видео из 10 сек, где на фоне всплывают пузырьки. Как мне это сделать? Приложение пишу на React и SCSS.

class Contacts extends Component {
  render() {
    return(<div className={styles.container}>
      <video className={styles.bubbles} loop="loop" autoplay="autoplay" muted="muted">
        <source src={bubbles} type='video/mp4; codecs="avc1.42E030, mp4a.40.2"' />
        {/* <source src="video/bubbles.webm" type='video/webm; codecs="vp8, vorbis"' />
        <source src="video/bubbles.ogv" type='video/ogg; codecs="theora, vorbis"' /> */}
      </video>
      <div className={styles.contactsInfo}>
        <div>
          <p className={styles.come}>&#8212;</p>
          <p className={styles.come}>Приходите</p>
        </div>
        <div>
          <p className={styles.adress}>ул. Рубинштейна 48, Санкт-Петербург, 191002, Россия</p>
          <p className={styles.adress}>[email protected] \ +7-931-456-54-46</p>
        </div>
        <div>
          <p className={styles.workTime}>ЧАСЫ РАБОТЫ</p>
          <p className={styles.workTime}>ПН-ПТ: 9:00-22:00 \ СБ: 10:00-21:00 \ ВС: 10:00-20:00</p>
        </div>
        <form>
          <input type='text' placeholder='Имя*' className={styles.info}/>
          <input type='text' placeholder='Email*' className={styles.info}/>
          <input type='text' placeholder='Телефон' className={styles.info}/>
          <input type='text' placeholder='Сообщение' className={styles.message}/>
          {/* <textarea placeholder='Введите текст'></textarea> */}
          <button>Отправить</button>
        </form>
        <p>Посмотреть на карте></p>
      </div>
    </div>)
  }
}

export default Contacts;