Section is overlapping on the background image

Question

I have two problem to sort out. First, I would like to have a background image and over that, I have a YouTube video but it should be in the center and vertically in the middle to look nice. Second, when I am trying to add a new section i.e. "Banking" section in this example, it's adding over the image but what I want is to be started after the image. What am I doing wrong?

        .newsticker{
     height:50px;
     vertical-align:middle;
     background-color:#00642d;
     width:100%;
    }


    .master-head {
      text-align: center;
      color: white;
      background-image: url("/images/header.jpg");
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-position: center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     z-index:-1;
    }

    .player{
     text-align: center;
    }

                <!-- Background Image -->

    <div class="master-head">

    </div>

    <!-- News Ticker -->
    <div class="newsticker">
     News would go here.
    </div>


    <!-- Live Video -->
    <div class="container">
     <div class="player">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/uilkmUoXoLU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
     </div>
    </div>

    <!-- Banking Section -->
    <section>
     <div class="container">
      <h1>Banking</h1>
     </div>
    </section>

Answer 1

Try this

<div class="master-head">


<!-- News Ticker -->
<div class="newsticker">
    News would go here.
</div>


<!-- Live Video -->
<div class="container video-center-align">
    <div class="player">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uilkmUoXoLU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
</div>

</div>

<!-- Banking Section -->
<section>
    <div class="container">
        <h1>Banking</h1>
    </div>
</section>



.newsticker{
    height:50px;
    vertical-align:middle;
    background-color:#00642d;
    width:100%;
}

.player{
    text-align: center;
}

.master-head
{
    position: relative;
    width: 100%;
    height: 100vh;
    float: left;
    text-align: center;
    color: white;
    background-image: url("/images/header.jpg");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.video-center-align
{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -webkit-flex-direction: column;
    text-align: center;
    margin:  0 auto;
    left: 0;
    right: 0;
    top: 0px;
    padding-top: 50px;
}
section
{
    width: 100%;
    float: left;
}