'achieving a responsive Height
I am developing the front end for a new project of mine. And I am using a combination of custom CSS & bootstrap to achieve a responsive interface. The width is currently responsive & is resizing accordingly with the browser.
I now need to achieve the same but for the HEIGHT specifically. Having a bit of troubles & running into a roadblock in doing this at the moment. Hopefully I may find some help here.
The specific elements I am trying to target are the 'Features' & 'Video-placeholder' elements on the page. I would like to set it's height to expand with the page's size, so all elements on the interface remain proportional regardless of the browsers size.
See the design here on codepen: Interface design
Code here as well:
main > .container {
padding: 60px 15px 0;
}
* {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}
body {
background-color: #F8F8F8 !important;
}
nav {
height: 85px;
background-color: #FFF !important;
border-bottom: solid 1px #DDD;
box-shadow: 1px 1px #ececec;
padding: 0px 110px 0px 94px !important;
}
input /* Hidden file input */
{
opacity:0.0;
filter: alpha(opacity=0);
display: none;
}
button {
background: transparent;
border: transparent;
}
#upld-button {
color: #FFF;
background-color: #B02BF4;
border-color: #B02BF4;
border-radius: 5em;
padding: 10px 29px 14px 29px;
text-decoration: none;
font-weight: 600;
margin: -16px;
}
#upld-button:hover {
background: #9E41CE !important;
}
main {
overflow: scroll;
}
#mid-section {
margin: 126px 5% 2% 5%;
max-width: 100%;
display: flex;
}
#features {
background-color: #FFF;
width: 29%;
border-radius: 6px;
}
#files-dropdown {
width: 100%;
height: 55px;
margin: 0;
padding: 14px;
background-color: #B02BF4;
text-align: center;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
#files-dropdown:hover {
background: #9E41CE;
cursor: pointer;
}
ul {
padding: 16px 40px 15px;
list-style-type: none;
}
li {
padding: 36px 0 0 0;
}
ul li a {
text-decoration: none;
color: #767575;
}
ul li a:hover {
color: #000;
}
#video-placeholder {
min-width: 70%;
height: 465px;
background-color: #DDD;
border-radius: 6px;
margin-left: 4%;
}
#video-controls-container {
float: right;
margin: 0px 310px 26px 6px;
padding: 0px;
}
button.controls {
color: #414040;
background-color: transparent;
border: solid 1px #B02BF4;
border-radius: 5em;
margin: 0 6px 0px 0px;
padding: 6px 26px;
}
button.controls:hover {
color: #FFF;
background-color: #B02BF4;
border: solid 1px #B02BF4;
}
footer {
background-color: #FFF;
height: 79px;
border-top: solid 1px #DDD;
box-shadow: 0px 0px 1px 1px #ECECEC;
padding: 0px 61px 0px 61px;
}
#scrub-bar-container {
margin: 0;
padding: 19px 46px 29px 46px;
}
#play-button {
background: #B02BF4 !important;
border-color: #B02BF4 !important;
color: #FFF !important;
}
#play-button:hover {
background-color: #AA00FFA9 !important;
}
#scrub-bar {
background:#F4F4F4;
margin: 0px 35px 0px 35px;
padding: 0px 440px 9px 675px;
display: inline;
border-radius: 6px;
height: 26px;
}
#placeholder {
color: #FFF;
background-color: #B02BF4;
border-color: #B02BF4;
border-radius: 5em;
padding: 6px 29px 10px 29px;
text-decoration: none;
font-weight: 600;
display: inline-block;
}
#placeholder:hover {
background-color: #AA00FFA9 !important;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #B02BF4;
width: 6px;
border-radius: 6px;
} <!DOCTYPE html>
<html lang = "en" class = "h-100">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<meta name = "description" content = "">
<meta name = "author" content = "author">
<title>Interface</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body class = "">
<header>
<nav class = "navbar navbar-expand fixed-top">
<div class = "container-fluid">
<a class = "navbar-brand" href = "#" style = "padding-top: 0px;">logo</a>
</button>
<div class = "collapse navbar-collapse" id = "navbarCollapse">
<span class = "navbar-nav me-auto mb-2 mb-md-0">
</span>
<form class = "d-flex">
<button id = "upld-button" onclick = "document.getElementById('file-input').click()"><input id = "file-input" type = "file" name = "file-upld" >UPLOAD</button>
</form>
</div>
</div>
</nav>
</header>
<main class = "flex-shrink-0">
<div id = "mid-section">
<div id = "features">
<div id = "files-dropdown"><span style="color: #FFF;">File(s)</span></div>
<ul>
<li><a href = "#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
</svg></a></li>
<li><a href = "#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-slash-square" viewBox="0 0 16 16">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
<path d="M11.354 4.646a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708l6-6a.5.5 0 0 1 .708 0z"/>
</svg></a></li>
<li><a href = "#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
</svg></a></li>
<li><a href = "#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-chat-right-text" viewBox="0 0 16 16">
<path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/>
<path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
</svg></a></li>
<li><a href = "#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-sticky" viewBox="0 0 16 16">
<path d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 15 8.586V2.5A1.5 1.5 0 0 0 13.5 1h-11zM2 2.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V8H9.5A1.5 1.5 0 0 0 8 9.5V14H2.5a.5.5 0 0 1-.5-.5v-11zm7 11.293V9.5a.5.5 0 0 1 .5-.5h4.293L9 13.793z"/>
</svg></a></li>
<li><a href = "#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</svg></a></li>
</ul>
</div>
<span id = "video-placeholder">
</span>
</div>
<!--<div id = "video-controls-container">
<button class = "controls">Skip backwards</button> <button class = "controls">skip forwards</button> <button class = "controls">Control</button> <button class = "controls">Control</button>
</div>-->
</main>
<footer class = "navbar navbar-expand fixed-bottom">
<div class = "container-fluid">
<button type = "button" class = "btn btn-outline-primary" id = "play-button">Play video</button>
<div class = "collapse navbar-collapse" id = "navbarCollapse">
<span class = "navbar-nav me-auto mb-2 mb-md-0" id = "">
<!--<div id = "scrub-bar">
</div>-->
</span>
<form class = "d-flex">
<button id = "placeholder">Trim</button>
</form>
</div>
</div>
</footer>
<script src = "Interface/javascript/bootstrap/bootstrap.bundle.min.js"></script>
</body>
</html>Thanks in advance for reading!
Solution 1:[1]
You could use a combination of percent heights and display flex to shrink the page UI with browser window height, check below sample in full page view and resize your browser window.
main > .container {
padding: 60px 15px 0;
}
* {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
height: 100vh;
}
body {
background-color: #F8F8F8 !important;
height: 100%;
display: flex;
flex-direction: column;
}
nav {
height: 10vh;
background-color: #FFF !important;
border-bottom: solid 1px #DDD;
box-shadow: 1px 1px #ececec;
padding: 0px 110px 0px 94px !important;
}
input /* Hidden file input */
{
opacity:0.0;
filter: alpha(opacity=0);
display: none;
height: 2vh;
}
button {
background: transparent;
border: transparent;
padding: 1vh 2vw;
font-size: 4vh;
}
#upld-button {
color: #FFF;
background-color: #B02BF4;
border-color: #B02BF4;
border-radius: 5em;
padding: 1vh 2vw;
text-decoration: none;
font-weight: 600;
margin: -16px;
font-size: 4vh;
}
#upld-button:hover {
background: #9E41CE !important;
}
main {
overflow: scroll;
}
#mid-section {
margin: 5%;
max-width: 100%;
display: flex;
flex: 1;
}
#features {
background-color: #FFF;
width: 29%;
border-radius: 6px;
display: flex;
flex-direction: column;
flex: 1;
}
#files-dropdown {
width: 100%;
margin: 0;
padding: 2vh;
background-color: #B02BF4;
text-align: center;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
#files-dropdown:hover {
background: #9E41CE;
cursor: pointer;
}
ul {
padding: 16px 40px 15px;
list-style-type: none;
justify-content: space-between;
}
li {
padding: 0;
}
ul li a {
text-decoration: none;
color: #767575;
}
ul li a:hover {
color: #000;
}
#video-placeholder {
min-width: 70%;
background-color: #DDD;
border-radius: 6px;
margin-left: 4%;
}
#video-controls-container {
float: right;
margin: 0px 310px 26px 6px;
padding: 0px;
}
button.controls {
color: #414040;
background-color: transparent;
border: solid 1px #B02BF4;
border-radius: 5em;
margin: 0 6px 0px 0px;
padding: 6px 26px;
}
button.controls:hover {
color: #FFF;
background-color: #B02BF4;
border: solid 1px #B02BF4;
}
footer {
background-color: #FFF;
height: 79px;
border-top: solid 1px #DDD;
box-shadow: 0px 0px 1px 1px #ECECEC;
padding: 0px 61px 0px 61px;
height: 10vh;
}
#scrub-bar-container {
margin: 0;
padding: 19px 46px 29px 46px;
}
#play-button {
background: #B02BF4 !important;
border-color: #B02BF4 !important;
color: #FFF !important;
}
#play-button:hover {
background-color: #AA00FFA9 !important;
}
#scrub-bar {
background:#F4F4F4;
margin: 0px 35px 0px 35px;
padding: 0px 440px 9px 675px;
display: inline;
border-radius: 6px;
height: 26px;
}
#placeholder {
color: #FFF;
background-color: #B02BF4;
border-color: #B02BF4;
border-radius: 5em;
padding: 6px 29px 10px 29px;
text-decoration: none;
font-weight: 600;
display: inline-block;
}
#placeholder:hover {
background-color: #AA00FFA9 !important;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #B02BF4;
width: 6px;
border-radius: 6px;
} <!DOCTYPE html>
<html lang = "en" class = "h-100">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<meta name = "description" content = "">
<meta name = "author" content = "author">
<title>Interface</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body class = "">
<header>
<nav class = "navbar navbar-expand fixed-top">
<div class = "container-fluid">
<a class = "navbar-brand" href = "#" style = "padding-top: 0px;">logo</a>
</button>
<div class = "collapse navbar-collapse" id = "navbarCollapse">
<span class = "navbar-nav me-auto mb-2 mb-md-0">
</span>
<form class = "d-flex">
<button id = "upld-button" onclick = "document.getElementById('file-input').click()"><input id = "file-input" type = "file" name = "file-upld" >UPLOAD</button>
</form>
</div>
</div>
</nav>
</header>
<main class = "d-flex flex-grow-1">
<div id = "mid-section">
<div id = "features">
<div id = "files-dropdown"><span style="color: #FFF;">File(s)</span></div>
<ul class="d-flex flex-column flex-grow-1">
<li><a href = "#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
</svg></a></li>
<li><a href = "#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-slash-square" viewBox="0 0 16 16">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
<path d="M11.354 4.646a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708l6-6a.5.5 0 0 1 .708 0z"/>
</svg></a></li>
<li><a href = "#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
</svg></a></li>
<li><a href = "#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-chat-right-text" viewBox="0 0 16 16">
<path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/>
<path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
</svg></a></li>
<li><a href = "#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-sticky" viewBox="0 0 16 16">
<path d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 15 8.586V2.5A1.5 1.5 0 0 0 13.5 1h-11zM2 2.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V8H9.5A1.5 1.5 0 0 0 8 9.5V14H2.5a.5.5 0 0 1-.5-.5v-11zm7 11.293V9.5a.5.5 0 0 1 .5-.5h4.293L9 13.793z"/>
</svg></a></li>
<li><a href = "#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</svg></a></li>
</ul>
</div>
<span id = "video-placeholder">
</span>
</div>
<!--<div id = "video-controls-container">
<button class = "controls">Skip backwards</button> <button class = "controls">skip forwards</button> <button class = "controls">Control</button> <button class = "controls">Control</button>
</div>-->
</main>
<footer class = "navbar navbar-expand fixed-bottom">
<div class = "container-fluid">
<button type = "button" class = "btn btn-outline-primary" id = "play-button">Play video</button>
<div class = "collapse navbar-collapse" id = "navbarCollapse">
<span class = "navbar-nav me-auto mb-2 mb-md-0" id = "">
<!--<div id = "scrub-bar">
</div>-->
</span>
<form class = "d-flex">
<button id = "placeholder">Trim</button>
</form>
</div>
</div>
</footer>
<script src = "Interface/javascript/bootstrap/bootstrap.bundle.min.js"></script>
</body>
</html>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | nvkrj |