Media Element JS not working properly with slider

Question

I am trying to build a carousel with videos and the carousel part is somewhat working, but the video player is not.

This is how the HTML looks like

<div class='col-sm videoCarouselMain redSectionUnderline'>
            @foreach ($videos as $video)
                <div class="videoCarouselMainItem">
                    <video id="playerYt" controls="controls" poster="{{mediaObj($video)}}">
                        <source src="{{$video->youtube}}" type="video/youtube">
                    </video>
                </div>
                @endforeach
        </div>

And this is the initialisation script

$(document).ready(function() {
            $('#playerYt').mediaelementplayer({
                alwaysShowControls: false,
                videoVolume: 'horizontal',
                features: ['playpause','progress','volume','fullscreen']
            });
        });

What happens is when I click on the first slide to play the video it somewhat plays, although looks messy (which is probably fixable with CSS after some tinkering). My bigger question and problem is once second slide and video is chosen, that video won't play and I assume it has something to do with the id being the same, however I am not sure how to fix that. Any help is much appreciated! If any other code is needed to better understand my issue let me know! :)