"Hide" div by default

Question

Good afternoon, I am developing a site for access to videos about disciplines, I want to make when selecting a discipline appear the buttons of the image below.

Next to this select, I made two buttons that should appear after selecting a course:

I realized this way of "hiding" as follows:

      $(document).ready(function () {
    $("#disciplina_prof").change(function () {
      if($("#disciplina_prof").val() == ""){
        $('#seus_videos').hide();
      } else {
        $('#seus_videos').show();
      }
    });
  });

However when reloading the page the buttons still appear.

Taking into account that "Select a discipline" has value "";

HTML:

<div class="container">
    <div class="row about-container">
      <div class="col-md-4">
            <div class="page-header clearfix">
                <h2 class="pull-left">Selecione sua diciplina:</h2>
                <div class="box">
                <select name="disciplina_prof" id="disciplina_prof">
                  <option value="" selected=selected>Selecione uma disciplina</option>
                  <?php
                  if($num_logar > 0) {
                      do {
                      echo "<option value='".$fet_logar['disciplina_id']."'>".$fet_logar['disciplina_nome']."</option>";
                      }while($fet_logar = mysqli_fetch_assoc($exe_logar));
                  }
                  ?>          
                </select>
              </div>
            </div>
        </div>
          <div class="col-md-4 offset-md-4">
          <div id="seus_videos">
          <div class="page-header clearfix">
          <h2 class="pull-left">Seus vídeos:</h2> 
          </div>
          <button type="button" class="btn btn-secondary btn-sm">Videos aprovados</button>
          <button type="button" id="video_pendente" class="btn btn-secondary btn-sm">Videos pendentes</button>
          </div>
          </div>   
    </div>     
</div>

Answer 1

You can add a css class that contains the element display: none; or add it directly to the button tag, as below:

Edit

place the element display: none; on your tag div#seus_videos

<div class="col-md-4 offset-md-4">
    <div id="seus_videos" style="display: none;">
    <div class="page-header clearfix">
        <h2 class="pull-left">Seus vídeos:</h2> 
    </div>
    <button type="button" class="btn btn-secondary btn-sm">Videos aprovados</button>
    <button type="button" id="video_pendente" class="btn btn-secondary btn-sm" >Videos pendentes</button>
    </div>
</div> 

Answer 2

Here you are hiding the BTN inside the function $('#seus_videos').hide();

But to hide them before, just you put display:none on the selections you’re wearing #seus_videos

With CSS would be (indicate that option)

#seus_videos {
  display:none
}

By jQuery just vc add this list out of function

$(document).ready(function () {
  $('#seus_videos').hide();
  $("#disciplina_prof").change(function () {
    .....ETC...