Q:

Как сделать смену кнопок play/close?

Подскажите пожалуйста как сделать, чтобы при click на кнопке play данная кнопка скрывалась и отображалась кнопка close, а когда закрываю видео, кнопка close скрывалась и появлялась кнопка play ?
<section class="section_1">
    <div id="wideo">
           <div id="play">
               <i class="far fa-play-circle"></i> (кнопка плей)
           </div>
           <div id="close">
               <i class="fas fa-times-circle"></i> (кнопка клозе)
           </div>

           <iframe style="display: none;" id="video" width="100%" 
           height="100vh" src="https://www.youtube.com/embed/-yQ8kxikSJQ" 
           frameborder="0" allow="autoplay; encrypted-media" 
           allowfullscreen></iframe>
          <a href="http://127.0.0.1:49217/index.html"></a>       
     </div>
 </section>

#play {
    color: #fff;
     position: absolute;
     font-size: 60px;
     left: 48%;
     top: 50%;
     cursor: pointer;
     transition: all 0.5s ease;
   }

#close {
    color: #fff;
     position: absolute;
     top: 5px;
     left: 84%;
     font-size: 25px;
  }

.section_1 {
    background-image: url(image/video_image.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh; 
    position: relative;
}

$('#close').find('#play').on('click', function() {
  $('#video').slideToggle(function(){
       if($('#close')){
           $('#close').hide();
       } 
  });
});

A:

Вариант 1: отображение/скрытие play/close происходит независимо от выполнения slideToggle().
$('#play, #close').on('click', function(e) {
    $('#video').slideToggle();
    $('#play, #close').toggle();  
});

$('#play, #close').on('click', function(e) {
    $('#video').slideToggle();
    $('#play, #close').toggle();  
});
body {
  background: #444;
}

#play {
  color: #fff;
  position: absolute;
  font-size: 60px;
  left: 48%;
  top: 50%;
  cursor: pointer;
  transition: all 0.5s ease;
}

#close {
  display: none;
  color: #fff;
  position: absolute;
  top: 5px;
  left: 84%;
  font-size: 25px;
}

.section_1 {
  background-image: url(image/video_image.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  position: relative;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section_1">
  <div id="wideo">
    <div id="play">
      <i class="far fa fa-play-circle"></i> (кнопка плей)
    </div>
    <div id="close">
      <i class="fas fa fa-times-circle"></i> (кнопка клозе)
    </div>
    <iframe style="display: none;" id="video" width="100%" height="100vh" src="https://www.youtube.com/embed/-yQ8kxikSJQ?r=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    <a href="http://127.0.0.1:49217/index.html"></a>
  </div>
</section>

Вариант 2: отображение/скрытие play/close происходит после выполнения slideToggle(). Чтобы ответ не был копией другого, добавлен старт/стоп видео в iframe при нажатии на кнопки.
(!) В сниппете не работает, работает на jsfiddle. 
(!) Для работы в ссылку на видео необходимо добавить параметр, например r=0: https://www.youtube.com/embed/-yQ8kxikSJQ?r=0
$('#play, #close').on('click', function(e) {
    let obj = this; //e.target.id может работать нестабильно
    let video_src = $("#video").attr('src').replace(/\&autoplay\=\d+/, '');
    $('#video').slideToggle(function(){
      $('#play, #close').toggle();
      $("#video").attr('src', video_src + ((obj.id == 'play') ? '&autoplay=1' : ''));
    });
});

$('#play, #close').on('click', function(e) {
  let obj = this; //e.target.id может работать нестабильно
  let video_src = $("#video").attr('src').replace(/\&autoplay\=\d+/, '');
  $('#video').slideToggle(function(){
    $('#play, #close').toggle();
    $("#video").attr('src', video_src + ((obj.id == 'play') ? '&autoplay=1' : ''));
  });
  
});
body {
  background: #444;
}

#play {
  color: #fff;
  position: absolute;
  font-size: 60px;
  left: 48%;
  top: 50%;
  cursor: pointer;
  transition: all 0.5s ease;
}

#close {
  display: none;
  color: #fff;
  position: absolute;
  top: 5px;
  left: 84%;
  font-size: 25px;
}

.section_1 {
  background-image: url(image/video_image.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  position: relative;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section_1">
  <div id="wideo">
    <div id="play">
      <i class="far fa fa-play-circle"></i> (кнопка плей)
    </div>
    <div id="close">
      <i class="fas fa fa-times-circle"></i> (кнопка клозе)
    </div>
    <iframe style="display: none;" id="video" width="100%" height="100vh" src="https://www.youtube.com/embed/-yQ8kxikSJQ?r=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    <a href="http://127.0.0.1:49217/index.html"></a>
  </div>
</section>

