Поставить video class и img class в одну позицию

https://ibb.co/Lh7JDn3

здесь у меня два кружочка,в одном показывает видео, в другом картинки, мне надо их поставить в одну позицию
css код:
.player {

  position: relative;

  text-align: center;

  cursor: pointer;

  width: 100%;

  height: 100%;

}



@media (max-width: 767px) {

  .player {

    overflow: hidden;

  }

}



.player__video {

  overflow: hidden;

  max-width: 100%;

  position: absolute;

  vertical-align: top;

  height: 100%;

  width: 100%;

  width: 100%;

  height: 100%;

  -o-object-fit: cover;

     object-fit: cover;

}





 

  .player__video {

    border-radius: 50%;

  }



 .player2 {

    border-radius: 50%;

  }



  .player__video{

     z-index:100;

    width: 100%;

    height: 100%;

    -o-object-fit: cover;

       object-fit: cover;

    max-height: 100%;

    position: absolute;

   

  }
html код:
<div class="player">

                                        <video class="player__video" width="506" height="506" muted preload="auto">

                  <source src="[xfvalue_videopath]" type="video/mp4">

                  Your browser does not support the video tag.

                </video>

               	<img class="player2" src=[xfvalue_videopathimage] width="506" height="506">