Заставить гибкий элемент заполнить ширину страницы

Question

Я хочу, чтобы мой аудио-плеер правильно уменьшился до полной ширины моей страницы. Я не понял, что я пропустил или что я делаю неправильно ...

(как это выглядит сейчас)

Я хочу использовать HTML пользовательские элементы управления для рисования моего JSON Audio-плеера. Вместо того, чтобы помещать массив готовых свойств, я пытаюсь предлагаемым способом для своих пользовательских элементов управления.

(Как это должно выглядеть в конце)

СМОТРИТЕ НА МОЙ СКИДКУ: https://jsfiddle.net/CAT999/1oL6w5jm/28/

Драгоценная помощь, чтобы заставить это работать?

Примечание:

Этот аудиоплеер поддерживает список воспроизведения с помощью JSON данных и пошаговой навигации. Версия, которую вы сейчас видите, является новым sh новым подходом к этому проекту ... путем модернизации стиля и выгрузки всего дерьма с обнаружением браузера в замечательный плагин аудиоплеера под названием Plyr (https://github.com/sampotts/plyr) .

// Mythium Archive: https://archive.org/details/mythium/

const controls = `
<div class="plyr__controls">



    <button type="button" class="plyr__control" data-plyr="restart">
        <svg role="presentation"><use xlink:href="#plyr-restart"></use></svg>
        <span class="plyr__tooltip" role="tooltip">Restart</span>
    </button>



   <div id="tracks">
                    <a id="btnPrev">&vltri;</a><a id="btnNext">&vrtri;</a>
                </div>


        <use xlink:href="#plyr-rewind"></use></svg>
        <span class="plyr__tooltip" role="tooltip">Rewind {seektime} secs</span>
    </button>


    <button type="button" class="plyr__control" aria-label="Play, {title}" data-plyr="play">
        <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-pause"></use></svg>
        <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-play"></use></svg>
        <span class="label--pressed plyr__tooltip" role="tooltip">Pause</span>
        <span class="label--not-pressed plyr__tooltip" role="tooltip">Play</span>
    </button>




    <div class="plyr__progress">
        <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
        <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
        <span role="tooltip" class="plyr__tooltip">00:00</span>
    </div>
    <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div>
    <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div>


<button type="button" class="plyr__control" aria-label="Mute" data-plyr="mute">
        <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-muted"></use></svg>
        <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-volume"></use></svg>
        <span class="label--pressed plyr__tooltip" role="tooltip">Unmute</span>
        <span class="label--not-pressed plyr__tooltip" role="tooltip">Mute</span>
    </button>




  <div class="plyr__volume">
        <input data-plyr="volume" type="range" min="0" max="1" step="0.05" value="1" autocomplete="off" aria-label="Volume">
    </div>



    <button type="button" class="plyr__control" data-plyr="fullscreen">
        <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-exit-fullscreen"></use></svg>
        <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-enter-fullscreen"></use></svg>
        <span class="label--pressed plyr__tooltip" role="tooltip">Exit fullscreen</span>
        <span class="label--not-pressed plyr__tooltip" role="tooltip">Enter fullscreen</span>
    </button>



</div>
`;


jQuery(function ($) {
    'use strict'
    var supportsAudio = !!document.createElement('audio').canPlayType;
    if (supportsAudio) {
        // initialize plyr
        var player = new Plyr('#audio1', {
            controls
        });
        // initialize playlist and controls

        var index = 0,
            playing = false,

            mediaPath = 'https://archive.org/download/AphexTwinLondon03.06.1704/',
            extension = '',
            tracks = [{
                "track": 1,
                "name": "Aphex Twin - Live Studio - 421HYP",
                "duration": "28:09",
                "file": "Aphex%20Twin%20-%20London%2003.06.17%20-%2001",
                "image": "https://i.pinimg.com/originals/8e/c3/94/8ec394dc007c81af1b83572f85bc7168.jpg"


            }, {
                "track": 2,
                "name": "The Stalin - Broadwing Studio (Final Mix)",
                "duration": "8:30",
                "file": "BS_TF",
                "image": "https://pbs.twimg.com/media/D5bS0DkUcAAn-Jz.jpg"
            }, {
                "track": 3,
                "name": "All The King's Men - Broadwing Studio (Final Mix)",
                "duration": "5:01",
                "file": "BS_ATKM",
                "image": "https://pbs.twimg.com/media/DCRhRqnW0AAKf16.jpg"
            }, {
                "track": 4,
                "name": "The Forsaken - Broadwing Studio (First Mix)",
                "duration": "8:31",
                "file": "BSFM_TF",
                "image": "http://cps-static.rovicorp.com/3/JPG_500/MI0000/606/MI0000606178.jpg"
            }, {
                "track": 5,
                "name": "All The King's Men - Broadwing Studio (First Mix)",
                "duration": "5:05",
                "file": "BSFM_ATKM"
            }, {
                "track": 6,
                "name": "All This Is - Alternate Cuts",
                "duration": "2:48",
                "file": "AC_ATI"
            }, {
                "track": 7,
                "name": "All The King's Men (Take 1) - Alternate Cuts",
                "duration": "5:44",
                "file": "AC_ATKMTake_1"
            }, {
                "track": 8,
                "name": "All The King's Men (Take 2) - Alternate Cuts",
                "duration": "5:26",
                "file": "AC_ATKMTake_2"
            }, {
                "track": 9,
                "name": "Magus - Alternate Cuts",
                "duration": "5:46",
                "file": "AC_M"
            }, {
                "track": 10,
                "name": "The State Of Wearing Address (fucked up) - Alternate Cuts",
                "duration": "5:25",
                "file": "AC_TSOWAfucked_up"
            }, {
                "track": 11,
                "name": "Magus - Popeye's (New Years '04 - '05)",
                "duration": "5:53",
                "file": "PNY04-05_M"
            }, {
                "track": 12,
                "name": "On The Waterfront - Popeye's (New Years '04 - '05)",
                "duration": "4:40",
                "file": "PNY04-05_OTW"
            }, {
                "track": 13,
                "name": "Trance - Popeye's (New Years '04 - '05)",
                "duration": "13:15",
                "file": "PNY04-05_T"
            }, {
                "track": 14,
                "name": "The Forsaken - Popeye's (New Years '04 - '05)",
                "duration": "8:12",
                "file": "PNY04-05_TF"
            }, {
                "track": 15,
                "name": "The State Of Wearing Address - Popeye's (New Years '04 - '05)",
                "duration": "7:02",
                "file": "PNY04-05_TSOWA"
            }, {
                "track": 16,
                "name": "Magus - Popeye's (Valentine's Day '05)",
                "duration": "5:43",
                "file": "PVD_M"
            }, {
                "track": 17,
                "name": "Trance - Popeye's (Valentine's Day '05)",
                "duration": "10:45",
                "file": "PVD_T"
            }, {
                "track": 18,
                "name": "The State Of Wearing Address - Popeye's (Valentine's Day '05)",
                "duration": "5:36",
                "file": "PVD_TSOWA"
            }, {
                "track": 19,
                "name": "All This Is - Smith St. Basement (01/08/04)",
                "duration": "2:48",
                "file": "SSB01_08_04_ATI"
            }, {
                "track": 20,
                "name": "Magus - Smith St. Basement (01/08/04)",
                "duration": "5:46",
                "file": "SSB01_08_04_M"
            }, {
                "track": 21,
                "name": "Beneath The Painted Eye - Smith St. Basement (06/06/03)",
                "duration": "13:07",
                "file": "SSB06_06_03_BTPE"
            }, {
                "track": 22,
                "name": "Innocence - Smith St. Basement (06/06/03)",
                "duration": "5:16",
                "file": "SSB06_06_03_I"
            }, {
                "track": 23,
                "name": "Magus - Smith St. Basement (06/06/03)",
                "duration": "5:46",
                "file": "SSB06_06_03_M"
            }, {
                "track": 24,
                "name": "Madness Explored - Smith St. Basement (06/06/03)",
                "duration": "4:51",
                "file": "SSB06_06_03_ME"
            }, {
                "track": 25,
                "name": "The Forsaken - Smith St. Basement (06/06/03)",
                "duration": "8:43",
                "file": "SSB06_06_03_TF"
            }, {
                "track": 26,
                "name": "All This Is - Smith St. Basement (12/28/03)",
                "duration": "3:00",
                "file": "SSB12_28_03_ATI"
            }, {
                "track": 27,
                "name": "Magus - Smith St. Basement (12/28/03)",
                "duration": "6:09",
                "file": "SSB12_28_03_M"
            }, {
                "track": 28,
                "name": "Madness Explored - Smith St. Basement (12/28/03)",
                "duration": "5:05",
                "file": "SSB12_28_03_ME"
            }, {
                "track": 29,
                "name": "Trance - Smith St. Basement (12/28/03)",
                "duration": "12:32",
                "file": "SSB12_28_03_T"
            }, {
                "track": 30,
                "name": "The Forsaken - Smith St. Basement (12/28/03)",
                "duration": "8:56",
                "file": "SSB12_28_03_TF"
            }, {
                "track": 31,
                "name": "All This Is (Take 1) - Smith St. Basement (Nov. '03)",
                "duration": "4:55",
                "file": "SSB___11_03_ATITake_1"
            }, {
                "track": 32,
                "name": "All This Is (Take 2) - Smith St. Basement (Nov. '03)",
                "duration": "5:45",
                "file": "SSB___11_03_ATITake_2"
            }, {
                "track": 33,
                "name": "Beneath The Painted Eye (Take 1) - Smith St. Basement (Nov. '03)",
                "duration": "14:05",
                "file": "SSB___11_03_BTPETake_1"
            }, {
                "track": 34,
                "name": "Beneath The Painted Eye (Take 2) - Smith St. Basement (Nov. '03)",
                "duration": "13:25",
                "file": "SSB___11_03_BTPETake_2"
            }, {
                "track": 35,
                "name": "The Forsaken (Take 1) - Smith St. Basement (Nov. '03)",
                "duration": "8:37",
                "file": "SSB___11_03_TFTake_1"
            }, {
                "track": 36,
                "name": "The Forsaken (Take 2) - Smith St. Basement (Nov. '03)",
                "duration": "8:36",
                "file": "SSB___11_03_TFTake_2"
            }],
            buildPlaylist = $.each(tracks, function(key, value) {
                var trackNumber = value.track,
                    trackName = value.name,
                    trackDuration = value.duration;
                if (trackNumber.toString().length === 1) {
                    trackNumber = '0' + trackNumber;
                }
                $('#plList').append('<li> \
                    <div class="plItem"> \
                        <span class="plNum">' + trackNumber + '.</span> \
                        <span class="plTitle">' + trackName + '</span> \
                        <span class="plLength">' + trackDuration + '</span> \
                    </div> \
                </li>');
            }),
            trackCount = tracks.length,
            npAction = $('#npAction'),
            npTitle = $('#npTitle'),
            audio = $('#audio1').on('play', function () {
                playing = true;
                npAction.text('Now Playing...');
            }).on('pause', function () {
                playing = false;
                npAction.text('Paused...');
            }).on('ended', function () {
                npAction.text('Paused...');
                if ((index + 1) < trackCount) {
                    index++;
                    loadTrack(index);
                    audio.play();
                } else {
                    audio.pause();
                    index = 0;
                    loadTrack(index);
                }
            }).get(0),
            btnPrev = $('#btnPrev').on('click', function () {
                if ((index - 1) > -1) {
                    index--;
                    loadTrack(index);
                    if (playing) {
                        audio.play();
                    }
                } else {
                    audio.pause();
                    index = 0;
                    loadTrack(index);
                }
            }),
            btnNext = $('#btnNext').on('click', function () {
                if ((index + 1) < trackCount) {
                    index++;
                    loadTrack(index);
                    if (playing) {
                        audio.play();
                    }
                } else {
                    audio.pause();
                    index = 0;
                    loadTrack(index);
                }
            }),
            li = $('#plList li').on('click', function () {
                var id = parseInt($(this).index());
                if (id !== index) {
                    playTrack(id);
                }
            }),
            loadTrack = function (id) {
                $('.plSel').removeClass('plSel');
                $('#plList li:eq(' + id + ')').addClass('plSel');
                npTitle.text(tracks[id].name);
                index = id;
                audio.src = mediaPath + tracks[id].file + extension;
                $('.track-thumbnails img').attr('src',tracks[id].image)
                updateDownload(id, audio.src);
            },
            updateDownload = function (id, source) {
                player.on('loadedmetadata', function () {
                    $('a[data-plyr="download"]').attr('href', source);
                });
            },
            playTrack = function (id) {
                loadTrack(id);
                audio.play();
            };
        extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
        loadTrack(index);
    } else {
        // no audio support
        $('.column').addClass('hidden');
        var noSupport = $('#audio1').text();
        $('.container').append('<p class="no-support">' + noSupport + '</p>');
    }
});

.plyr__control {
    background: 0 0;
    border: 0;
    border-radius: 3px;
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    overflow: visible;
    padding: 7px;
    position: relative;
    transition: all .3s ease;
}


/*FONT-FACE*/

@font-face {
    font-family: "fusaka-std";
    src: url("https://srv-file14.gofile.io/download/B5pmo7/HypermarketExpW00-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
}
/*"https://srv-file12.gofile.io/download/aWle2Q/FusakaStd-1.woff2*/

:root {
 --main-track-id-color: black;
 --now-play-track-id-color-hover: white;
 --main-track-id-color-hover: white;
 --main-bg-color: red;
 --playlist-track-hover: red;
}

.sticky {
    position:fixed;
    bottom:0px;
    height:140px;
    left:5rem;
    z-index:9999999;
    //animation: none;
}




.sticky-overlay{ 
   display:none; 
 }


.sticky-image:hover .sticky-overlay {
    display : block;
    position:fixed;
    bottom:120px;
    height:45px;
    left:11rem;
    z-index:99999999;     
    animation: comics--baloon  500ms ease-in-out; 
    animation-fill-mode: forwards;

    }
@keyframes comics--baloon {
  0% {  opacity: 0; transform: translate(-24px, 44px) rotate(0deg) scale(0) ; }
  100% {  opacity: 1; transform: translate(1px, -2px) rotate(0deg) scale(.8); }
} 







.close-button {
    display:block;
    font-size: 16px;
    font-weight:400;
    border: none;
    display: inline-block;
    padding: 1px 8px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: white;
    background-color: none;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
     pointer-events: all;
  }


.dekks-alert__close {
    font-size: .1rem;
    opacity: .5;
    cursor: pointer;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;   
  pointer-events: all;
}

.cookie__banner {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0px;
    z-index: 9999999999999999999999999;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    pointer-events: none;

}
@media (max-width: 450px) {
.cookie__banner {bottom: 0px; 
  }}
.dekks-alert {
  background:black;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 20px;
    width: auto;
    min-height: 20px;
    padding: 4px 8px;
    color: white;
    font-size:14px!important;
    letter-spacing:normal;
    border-radius: 6px;
    overflow: hidden;
    opacity: 1;    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}




















 main {
  position:fixed;
  margin-top:.1em;
  margin-left:2em;
  z-index:9999; 
  color:white;
  font-size:50px;
}

 main span {
   max-width:calc(100vw - 5em);
   line-height:1.4;
   background-color:black;
     display: inline-flex;
}
 .cursor:after {
     content: "";
     display: inline-block;
     width: 1ch;
     //height: 1.43em;
     background-color:black;
     //margin: -0.03em 0 -0.03em -0.03em;
}
 .cursor.active:after {
     animation: cursor 400ms ease-in-out infinite;
}
 @keyframes cursor {
     0%, 100% {
         background-color: #0b00a8;
    }
     50% {
         background-color: #a8a8a8;
    }
}


.plyr__progress__buffer{background-color:none;}

/*FLEXCOVER_ALBUM*/
.flex-container {
    width:70vh;
    //pointer-events:none;
  display:block;
    top:50%;
    left:50%;
    z-index:999999999999;
    position:fixed;
    transform:translateX(-50%) translateY(-50%);
    //background:black;
}

.track-thumbnails img {
  transform: rotate(5deg);
  width: 70vh;
  display: block;
  -webkit-box-shadow: 0px 0px 14px 1px rgba(0,0,0,0.56); 
  box-shadow: 0px 0px 14px 1px rgba(0,0,0,0.56);

}

.track-thumbnails:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.plyr__controls .plyr__controls__item.plyr__time {
    padding: 0 5px;
    color: white;
    font-family:monospace;
}
.plyr--full-ui input[type=range] {
   color: white;
     font-family:monospace;
   -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    color: #ffffff;
    display: block;
    margin: 0;
    padding: 0;
    transition: box-shadow .3s ease;
    width: 100%;
}

/* Global Styles
================================================== */

html,body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
background-color: var(--main-bg-color);
color: var(--main-track-id-color);
font-size: 17px;
font-family: fusaka-std,monospace;
font-weight:bold;
letter-spacing:.025rem;
line-height:1.618;
padding:1rem 0;
margin:0;
}

*,::before,::after {
    outline: none;
box-sizing:border-box;
}

* {
-webkit-tap-highlight-color:yellow;
-webkit-tap-highlight-color:yellow;
}


/* Setup
================================================== */

.container { position:relative;margin:0 auto;width:100%; }
.column { width:inherit; }


/* Typography / Links
================================================== */

p { color:#fff; display:block; font-size:.9rem; font-weight:400; margin:0 0 2px; }

a,a:visited { color:#8cc3e6; outline:0; text-decoration:underline; }
a:hover,a:focus { color:#bbdef5; }
p a,p a:visited { line-height:inherit; }


/* Misc.
================================================== */

.add-bottom { margin-bottom:2rem !important; }
.left { float:left; }
.right { float:right; }
.center { text-align:center; }
.hidden { display:none; }

.no-support {
margin:2rem auto;
text-align:center;
width:90%;
}


/* Audio Player Styles
================================================== */

audio {
display:none;
}

#audiowrap,
#plwrap {
margin:0 auto;
}

#tracks {
font-size:0;
position:relative;
text-align:center;
}
#audio1{
  background:green;
  width:100vw;

}
#audiowrap {
position: fixed;
display:flex;
background-color: var(--main-bg-color);
bottom:32px;
height:auto;
width:100%;
z-index:99;
font-size:0;
}
#nowPlay {
  background-color: green;
  color: var(--now-play-track-id-color-hover);
  text-transform: uppercase;
  width:100%;
  position: fixed;
  font-size:20px;
  bottom:0;margin:0;
  z-index:99;
  vertical-align:top;
}

#nowPlay span {
display:inline-block;
font-size:1.05rem;
vertical-align:top;
}

#nowPlay span#npAction {
//padding:21px;
padding:0 21px;
width:30%;
}

#nowPlay span#npTitle {
padding:0 21px;
text-align:right;
width:70%;
}

#plList li {
cursor:pointer;
display:block;
margin:0;
padding:9px 0;
}

#plList li:hover {
  background-color: var(--playlist-track-hover);
}
ul#plList {
  padding:0;
}
.plItem {
position:relative;
}
.plItem:hover{
  color:var(--main-track-id-color-hover);
-moz-transition:color .3s ease-in;
-o-transition:color .3s ease-in;
-webkit-transition:color .3s ease-in;

}




ul#plList {
  padding:0;
}
.plTitle {
text-align: end;
overflow:hidden;
position:absolute;
right:85px;
text-overflow:ellipsis;
top:0;
white-space:nowrap;
}


.plNum {
padding-left:21px;
width:25px;
}


.plLength {
padding-left:21px;
position:absolute;
right:21px;
top:0;
}

.plSel,
.plSel:hover {
text-transform: uppercase;
background-color: var(--playlist-track-hover);
color:#fff;
cursor:default !important;
}

#tracks a {
border-radius:3px;
color:#fff;
cursor:pointer;
display:inline-block;
font-size:2.3rem;
height:35px;
line-height:.175;
//margin:0 5px 30px;
padding:10px 15px;
color:grey;
text-decoration:none;
transition:background .3s ease;
}

#tracks a:last-child {
margin-left:0;
}

#tracks a:hover,
#tracks a:active {
color:black;
}

#tracks a::-moz-focus-inner {
border:0;
padding:0;
}


/* Plyr Overrides
================================================== */

.plyr {
font-family: "fusaka-std";
}

.plyr--audio .plyr__controls {
background-color: blue;
border:none;
color:#fff;
padding:0px ;

}

a.plyr__controls__item.plyr__control:hover,
.plyr--audio .plyr__controls button:hover,
.plyr--audio .plyr__controls button.tab-focus:focus,
.plyr__play-large {
background-color:rgba(0,0,0,.1);
}

.plyr__progress--played,
.plyr__volume--display {
color:rgba(0,0,0,.1);
}

.plyr--audio .plyr__progress--buffer,
.plyr--audio .plyr__volume--display {
background:rgba(0,0,0,.1);
}

.plyr--audio .plyr__progress--buffer {
color:rgba(0,0,0,.1);
}

.plyr__progress__buffer {
    -webkit-appearance: none;
    background: 0 0;
    border: 0;
    border-radius: 100px;
    height: 5px;
    left: 0;
    margin-top: -2.5px;
    padding: 0;
    position: absolute;
    top: 50%;
}


/* Media Queries
================================================== */

@media only screen and (max-width:600px) {
    #nowPlay span#npAction { display:none;}
    #nowPlay span#npTitle { display:block; text-align:center; width:100%; }
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://srv-file5.gofile.io/download/sNLS96/HypermarketExpW00-Bold.woff2"> 
<link rel="stylesheet" href="https://cdn.plyr.io/3.5.6/plyr.css">

    <div id="nowPlay">
                <span id="npAction">Paused...</span><span id="npTitle"></span></div>

            <div id="audiowrap">
                    <audio id="audio1">


                      Your browser does not support HTML5 Audio! ?</audio>
   </div>


            </div> 
<div class="container">
    <div class="column add-bottom">
        <div id="mainwrap">
            <div id="plwrap">
                <ul id="plList"></ul>
            </div>
        </div>
    </div>
    <div class="column add-bottom center">
        <p> Radio <a href="http://www.mythium.net/">The Archives</a></p>
        <p>Download: <a href="https://archive.org/download/mythium/mythium_vbr_mp3.zip">zip</a> / <a href="https://archive.org/download/mythium/mythium_archive.torrent">torrent</a></p>
    </div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5media/1.1.8/html5media.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.5.6/plyr.min.js"></script>

Answer 1

Скажите флексам, чтобы они занимали все доступное пространство.

Добавьте это к своему коду:

.plyr {
  flex: 1;
}

.plyr__progress {
  flex: 1;
}

исправленная скрипка