Проблемы с видеоплеером

128

09 сентября 2019, 04:50

я хотел добавить видо изменить плеер, но вместо того что бы заменить стандартные значки они у меня показываются на сайте. CSS файл я засунул в туже папку где находится html файл

<!DOCTYPE html>
<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
     {% load staticfiles %}
    <link rel = "stylesheet" type = "text / CSS" href = "video-player.css">
</head>
<body>
<img src="{% static 'accounts/image/gogi.jpg' %}" class="img-responsive center-block">
<div id="video-player">
            <video poster="image/127.jpg" width="1280" height="720" controls>
                <source src="{% static 'accounts/vid/1224.mp4' %}" type="video/mp4">
            </video>
<div id="progress-tree">
    <div id="progress"></div>
</div>
<div id="button-tree">
    <img id="play-button" src="{% static 'accounts/image/2712.png' %}" width="100" height="100">
        <div id="time-factor">
            0:00 / 0:00
        </div>
    <img id="backward-button" src="{% static 'accounts/image/backward.png' %}" width="100" height="100">
    <div id="soundbar-tree">
        <div id="soundbar" width="100" height="100"></div>
    </div>
    <img id="forward-button" src="{% static 'accounts/image/forward.png' %}" width="100" height="100">
</div>
</div>

А это CSS файл

#video-player{
    background-color: aquamarine;
    display: inline-block;
}
img{
    background-color: Aqua;
}
#video-tree{
    width: 640px;
    height: 640px;
}
video{
    height: 100%;
    width: 100%
}
#progress-tree{
    background-color: CadetBlue;
}
#progress{
    height: 5px;
    width; 50%;
    background-color: Black;
}
#button-tree{
    height: 50px;
}
#button-tree > * {
    display: inline-block;
    height: 50px;
    width: 50px;
    vertical-align: middle;
}

пожалуйста скажите где моя ошибка