Jquery video playlist donsent work on mobile

See more:

Javascript

HTML

jQuery

bootstrap

I have video playlist which work good on computer but when i try it on mobile, nothing works.
If i put static video url in this tags like this:

<video src="/media/1001/nature-beautiful-short-video-720p-hd-720p.mp4" class="embed-responsive-item" controls="controls"> Your browser does not support HTML5 video. </video>

than it works. So i think its problem with jquery.

I have followed this example: HTML5 - Video Playlist - JSFiddle[^]

What I have tried:

This is my HTML:

<section class="free-video py-2 pb-5">
    <div class="navbar">
        <a class="navbar-brand" href="/">
            <img src="/Images/logo.png" width="100" height="79" alt="">
        </a>
    </div>
    <div id="playlist" class="container text-center">
        <div class="row d-xs-none my-5">
            <div class="col-lg-4 col-sm-4 p-sm-2 p-md-3 my-1">
                <div class="card border border-primary link" movieurl="/media/1001/nature-beautiful-short-video-720p-hd-720p.mp4">
                    <div class="card-body p-sm-2" style="">
                        <div class="row justify-content-center">
                            <div class="col-md-12 col-9 d-flex flex-column">
                                <p class="lead">VIDEO 1</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-4 p-sm-2 p-md-3 my-1">
                <div class="card border border-primary link" movieurl="/media/1001/nature-beautiful-short-video-720p-hd-720p.mp4">
                    <div class="card-body p-sm-2">
                        <div class="row justify-content-center">
                            <div class="d-flex  col-md-12 flex-column col-9">
                                <p class="lead">VIDEO 2</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-4 p-sm-2 p-md-3 my-1">
                <div class="card border border-primary link" movieurl="/media/1001/nature-beautiful-short-video-720p-hd-720p.mp4">
                    <div class="card-body p-sm-2">
                        <div class="row justify-content-center">
                            <div class="d-flex  col-md-12 flex-column col-9">
                                <p class=" lead">VIDEO 3</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-6 col-sm-8 col-12">
                <div class="embed-responsive embed-responsive-16by9"> <video id="videoarea" src="" class="embed-responsive-item" type="video/mp4" controls="controls"> Your browser does not support HTML5 video. </video> </div>
            </div>
        </div>
    </div>
</section>

This is javascript:

$(function () {
     $("#playlist .link").on("click", function () {
         $("#videoarea").attr({
             "src": $(this).attr("movieurl"),
             "poster": "",
             "autoplay": "autoplay"
         })
     })
     $("#videoarea").attr({
         "src": $("#playlist .link").eq(0).attr("movieurl"),
         "poster": $("#playlist .link").eq(0).attr("moviesposter")
     })
 })