Footer overlapping on Mobile view 7.1

This piece of code (used to correct home/main page video ratio on mobile view) is triggering a very annoying footer overlapping in most (exception being home/main precisely) pages on mobile view:

/* mobile video ratio correction */
  @media screen and (max-width:767px) {
  #page section:first-child iframe#player {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
#page section:first-child {
    min-height: unset !important;
    height: 70vh !important;
}
  }

This seems to be a somewhat recurrent issue but I wasn’t able to find a solution.
Any help would be much appreciated.
Many thanks
Dave

First section appears on both Main Content & Footer. You need to edit class name to this

/* mobile video ratio correction */
  @media screen and (max-width:767px) {
  article section:first-child iframe#player {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
article section:first-child {
    min-height: unset !important;
    height: 70vh !important;
}
  }