Develop Reference

Setting up a Slick Carousel, containing sliders as individual elements

I want to create a carousel like this one here:
https://codepen.io/newrya/pen/eYMZdKe
The catch is, I want to make an auto play carousel using "slick" and want the above slider as individual elements instead of images. This is my initial Code. So, instead of these img elements inside div having class horizontal. I want the above slider as the elements.
$('.horizontal').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img{
width: 350px;
height: 350px;
margin-right: 100px;
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<img src="images/imags/1.jpg" class="before_after">
<img src="images/imags/2.jpg" class="before_after">
<img src="images/imags/3.jpg" class="before_after">
<img src="images/imags/4.jpg" class="before_after">
<img src="images/imags/5.jpg" class="before_after">
<img src="images/imags/6.jpg" class="before_after">
<img src="images/imags/8.jpg" class="before_after">
<img src="images/imags/9.jpg" class="before_after">
<img src="images/imags/10.jpg" class="before_after">
<img src="images/imags/11.jpg" class="before_after">
<img src="images/imags/12.jpg" class="before_after">
<img src="images/imags/13.jpg" class="before_after">
<img src="images/imags/14.jpg" class="before_after">
<img src="images/imags/15.jpg" class="before_after">
<img src="images/imags/16.jpg" class="before_after">
</div>
</section>
I copied the codepen code and replaced it with my img elements and made some changes with the css code and pasted it in my styles sheet.
This is the code:
const slider = document.querySelector('#image-slider');
const wrapper = document.querySelector('.img-wrapper');
const handle = document.querySelector('.handle');
slider.addEventListener("mousemove", sliderMouseMove);
slider.addEventListener("touchmove", sliderMouseMove);
function sliderMouseMove(event) {
if (isSliderLocked) return;
const sliderLeftX = slider.offsetLeft;
const sliderWidth = slider.clientWidth;
const sliderHandleWidth = handle.clientWidth;
let mouseX = (event.clientX || event.touches[0].clientX) - sliderLeftX;
if (mouseX < 0) mouseX = 0;
else if (mouseX > sliderWidth) mouseX = sliderWidth;
wrapper.style.width = `${((1 - mouseX/sliderWidth) * 100).toFixed(4)}%`;
handle.style.left = `calc(${((mouseX/sliderWidth) * 100).toFixed(4)}% - ${sliderHandleWidth/2}px)`;
}
let isSliderLocked = false;
slider.addEventListener("mousedown", sliderMouseDown);
slider.addEventListener("touchstart", sliderMouseDown);
slider.addEventListener("mouseup", sliderMouseUp);
slider.addEventListener("touchend", sliderMouseUp);
slider.addEventListener("mouseleave", sliderMouseLeave);
function sliderMouseDown(event) {
if (isSliderLocked) isSliderLocked = false;
sliderMouseMove(event);
}
function sliderMouseUp() {
if (!isSliderLocked) isSliderLocked = true;
}
function sliderMouseLeave() {
if (isSliderLocked) isSliderLocked = true;
}
$('.horizontal').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img {
width: 350px;
height: 350px;
margin-right: 100px;
}
.horizontal {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
:root {
--image-slider-width: min(80vw, 768px);
--image-slider-handle-width: 50px;
}
.horizontal {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
}
#image-slider {
position: relative;
width: var(--image-slider-width);
overflow: hidden;
border-radius: 1em;
box-shadow: -4px 5px 10px 1px gray;
cursor: col-resize;
}
#image-slider img {
display: block;
width: var(--image-slider-width);
height: auto;
max-height: 80vh;
object-fit: cover;
pointer-events: none;
user-select: none;
}
#image-slider .img-wrapper {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
overflow: hidden;
z-index: 1;
}
#image-slider .img-wrapper img {
position: absolute;
top: 0;
right: 0;
height: 100%;
filter: grayscale(100%);
transform: scale(1.2);
}
#image-slider .handle {
border: 0px solid red;
position: absolute;
top: 0;
left: calc(50% - var(--image-slider-handle-width)/2);
width: var(--image-slider-handle-width);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
user-select: none;
z-index: 2;
}
#image-slider .handle-circle {
width: var(--image-slider-handle-width);
height: var(--image-slider-handle-width);
color: white;
border: 2px solid white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
#image-slider .handle-line {
width: 2px;
flex-grow: 1;
background: white;
}
#media (max-width: 768px) {
:root {
--image-slider-width: 90vw;
}
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
</section>
For some, reason, in class "handle-circle", the code after '171' is not valid(it turns green).
The second problem I am facing is, the codepen slider doesn't work when I replaced it with the img elements. The 'mousemove' event is of no use when using it in carousels. How do I change that?

I think you might have issues with the slick mouse over binding conflicting with the mouse over your image, as a workaround you could iframe it and it will work like so
$(document).ready(function() {
$('.carousel').slick({
slidesToShow: 3,
dots: true,
centerMode: true,
});
});
html,
body {
background-color: #e74c3c;
}
.wrapper {
width: 100%;
padding-top: 20px;
text-align: center;
}
h2 {
font-family: sans-serif;
color: #fff;
}
.carousel {
width: 90%;
margin: 0px auto;
}
.slick-slide {
margin: 10px;
}
.slick-slide img {
width: 100%;
border: 2px solid #fff;
}
.wrapper .slick-dots li button:before {
font-size: 20px;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="wrapper">
<h2>Slick Carousel Example
<h2>
<div class="carousel">
<div>
<iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</div>
<div> <iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></div>
<div> <iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></div>
<div><img src="https://picsum.photos/300/200?random=4"></div>
<div><img src="https://picsum.photos/300/200?random=5"></div>
<div><img src="https://picsum.photos/300/200?random=6"></div>
</div>
</div>
not a nice solution but will give you what you want

Jquery to hide button when there are no more images on the right

im trying to write a HTML CSS JQUERY program where when I click "next" it will display the next images and when i click "prev" it will display the previous images and to hide the next button if there are no more images on the right and vise versa
im trying to write a HTML CSS JQUERY program where when I click "next" it will display the next images and when i click "prev" it will display the previous images and to hide the next button if there are no more images on the right and vise versa
$(document).ready(function() {
$('.next').on('click', function() {
var currentImg = $('.active');
var nextImg = currentImg.next();
if (nextImg.length) {
currentImg.removeClass('active').css('z-index', -10);
a = nextImg.addClass('active').css('z-index', 10);
console.log(nextImg.length)
if (!(nextImg.length)) {
next.style.displsy = "none";
}
}
});
$('.prev').on('click', function() {
var currentImg = $('.active');
var prevImg = currentImg.prev();
if (prevImg.length) {
currentImg.removeClass('active').css('z-index', -10);
prevImg.addClass('active').css('z-index', 10);
}
currentImage = $(".active");
if (!currentImg.next().length) {
$(".next").hide;
} else {
$(".next").show();
}
});
});
.slider-outer {
display: flex;
}
.slider-inner {
position: relative;
height: 300px;
width: 500px;
overflow: hidden;
float: left;
padding: 3px;
}
.slider-inner img {
display: none;
height: 300px;
width: 500px;
}
.slider-inner img.active {
display: inline-block;
}
.prev,
.next {
float: left;
margin-top: 130px;
}
.prev {
position: relative;
margin-right: -45px;
z-index: 100;
}
.next {
position: relative;
margin-left: -45px;
z-index: 100;
}
.container {
overflow: auto;
width: 540px;
height: 40px auto;
}
button {
height: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="slider-outer">
<button class="prev" id="prev">Prev</button>
<div class="slider-inner">
<img src="https://via.placeholder.com/500" class="active" />
<img src="https://via.placeholder.com/500" />
<img src="https://via.placeholder.com/500" />
<img src="https://via.placeholder.com/500" />
</div>
<button class="next" id="next">Next</button>
</div>
</div>

Some of the problems are:
A spelling mistake in displsy = "none"
Missing parentheses in $(".next").hide
When clicking "next", the "prev" button should appear again (if it was hidden), and vice versa.
You should also avoid code repetition, so create a function that gets as argument whether it should call .next() or .prev() and then do all the common things. Also, .toggle is a nice jQuery function so you can avoid an if..else:
function rotate(direction) {
var currentImg = $('.active');
currentImg.removeClass('active').css('z-index', -10);
currentImg = currentImg[direction]();
currentImg.addClass('active').css('z-index', 10);
$(".next").toggle(currentImg.next().length > 0);
$(".prev").toggle(currentImg.prev().length > 0);
}
$(document).ready(function() {
$('.next').on('click', () => rotate("next"));
$('.prev').on('click', () => rotate("prev"));
});
.slider-outer {
display: flex;
}
.slider-inner {
position: relative;
height: 300px;
width: 500px;
overflow: hidden;
float: left;
padding: 3px;
}
.slider-inner img {
display: none;
height: 300px;
width: 500px;
}
.slider-inner img.active {
display: inline-block;
}
.prev,
.next {
float: left;
margin-top: 130px;
}
.prev {
position: relative;
margin-right: -45px;
z-index: 100;
}
.next {
position: relative;
margin-left: -45px;
z-index: 100;
}
.container {
overflow: auto;
width: 540px;
height: 40px auto;
}
button {
height: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="slider-outer">
<button class="prev" id="prev">Prev</button>
<div class="slider-inner">
<img src="https://via.placeholder.com/500?text=1" class="active" />
<img src="https://via.placeholder.com/500?text=2" />
<img src="https://via.placeholder.com/500?text=3" />
<img src="https://via.placeholder.com/500?text=4" />
</div>
<button class="next" id="next">Next</button>
</div>
</div>

Iterative function to hide/show multiple images with for and if statements

I want to hide and show mulitple images, depending on the input code "places" inside the 'ShowPicture'-function. Please see my full example code below:
<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
<style>
body {font-size: 30px; text-align: center; vertical-align: middle}
#containertop {background-color: #808080; width: 100%; position:right}
#parent {display:flex;}
#containercircle {width: 30%;}
#containerimg {background-color: rgba(50,0,50,1);flex:1;}
header, footer {padding: 1em; color: rgba(50,0,50,1);background-color: #808080;clear: left;text-align: center}
#circle {width:100px;float:left;margin:5px; overflow:hidden; height:100px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; background-color:rgba(50,0,50,1); font-size:15px; line-height:100px} #circle:hover{font-size:16.5px;margin:5px;transition: All 0.2s ease-in-out}
.crop {width:40px;height:40px;}
</style>
<script>function ShowPicture(tekst, places){
for (var i = 0, i < places.length; i++) {
var idCust ="pic" + places[i];
var imag = document.getElementById(idCust);
if(imag.style.display === 'block'){
imag.style.display = 'none'; tekst.style.color = '';}
else {
imag.style.display = 'block'; tekst.style.color = 'red';}}}
</script>
</head>
<body>
<header><h1><div id="containertop">header</div></h1></header>
<div id="parent">
<div id ="containercircle" float = "right">
<div id="circle" onclick="ShowPicture(this,1)">Test</div>
</div>
<div id ="containerimg" >
<img id="pic0" class ="crop" src="boor.jpg" style="display:none;"/>
<img id="pic1" class ="crop" src="boor.jpg" style="display:none;"/>
<img id="pic2" class ="crop" src="boor.jpg" style="display:none;"/>
<img id="pic3" class ="crop" src="boor.jpg" style="display:none;"/>
</div>
</div>
<footer><div id="containertop">footer</div></footer>
</body>
</html>
two examples of a "places" code is
"123" and "24"
The function should read off the three numbers separately and hide or show the corresponding "idCust" from the css part. I have made id's in the css that is named "pic1", "pic2", etc.
For some reason, this is not working when I call the "ShowPicture" function after clicking on a div with the "onclick" statement. I got the feeling it has something to do with my for loop.. maybe there is a way to hide/show all together at once, but it should only show the images that correspond to the div I clicked on.

Your problem is that you have an error in your loop the comma in for (var i = 0, i < places.length; i++), should be replaced with a semicolon.
Another thing you were looping on a string and you passed 1 which is a Number so there won't be any loop, you need to pass it as a string in:
onclick="ShowPicture(this,'1')"
Demo:
function ShowPicture(tekst, places) {
for (var i = 0; i < places.length; i++) {
var idCust = "pic" + places[i];
var imag = document.getElementById(idCust);
if (imag) {
if (imag.style.display === 'block') {
imag.style.display = 'none';
tekst.style.color = '';
} else {
imag.style.display = 'block';
tekst.style.color = 'red';
}
}
}
}
body {
font-size: 30px;
text-align: center;
vertical-align: middle
}
#containertop {
background-color: #808080;
width: 100%;
position: right
}
#parent {
display: flex;
}
#containercircle {
width: 30%;
}
#containerimg {
background-color: rgba(50, 0, 50, 1);
flex: 1;
}
header,
footer {
padding: 1em;
color: rgba(50, 0, 50, 1);
background-color: #808080;
clear: left;
text-align: center
}
#circle {
width: 100px;
float: left;
margin: 5px;
overflow: hidden;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: rgba(50, 0, 50, 1);
font-size: 15px;
line-height: 100px
}
#circle:hover {
font-size: 16.5px;
margin: 5px;
transition: All 0.2s ease-in-out
}
.crop {
width: 40px;
height: 40px;
}
<header>
<h1>
<div id="containertop">header</div>
</h1>
</header>
<div id="parent">
<div id="containercircle" float="right">
<div id="circle" onclick="ShowPicture(this,'1')">Test</div>
</div>
<div id="containerimg">
<img id="pic0" class="crop" src="boor.jpg" style="display:none;" />
<img id="pic1" class="crop" src="boor.jpg" style="display:none;" />
<img id="pic2" class="crop" src="boor.jpg" style="display:none;" />
<img id="pic3" class="crop" src="boor.jpg" style="display:none;" />
</div>
</div>

Creating a Javascript Slideshow Using Button ID

I'm trying to create a slideshow with Javascript using this HTML. Thanks
<body>
<button id="next"> <img src ="buttons/next.png"/> </button>
<button id="back"> <img src = "buttons/back.png"/> </button>
<div class="container">
<div style="display: inline-block;">
<img src="agctype.jpg"/></div>
<div>
<img src="America.jpg"/></div>
<div>
<img src= "sbjlogo2.jpg"/></div>
</div>

Checkout codepen.io , I did a search for simple slide show. This one looks good for beginners http://codepen.io/jonny_roller/pen/MaNGwV
HTML
A Simple Slideshow
<div class="slideshow" onmouseover="showControls(this)" onmouseout="hideControls(this)">
<div class="controls hidden">
<a id="previous" href="" onclick="return slideshowPrevious()">‹</a>
<a id="play" class="hidden" href="" onclick="return slideshowPlay()">⊲</a>
<a id="pause" href="" onclick="return slideshowPause()">||</a>
<a id="next" href="" onclick="return slideshowNext()">›</a>
</div>
<div id="slide1" class="slide display" style="background-image: url(http://lorempixel.com/400/200/sports/1/)">
<span>Cricket: Some text goes here</span>
</div>
<div id="slide2" class="slide" style="background-image: url(http://lorempixel.com/400/200/sports/2/)">
<span>Surfing: Some more text appears here</span>
</div>
<div id="slide3" class="slide" style="background-image: url(http://lorempixel.com/400/200/sports/3/)">
<span>Cycling: This is the text for the final slide... it's a bit longer</span>
</div>
</div>
Some text at the bottom
CSS
body {
font-family: Verdana;
}
.slideshow {
position: relative;
width: 400px;
height: 200px;
}
.controls a {
z-index: 10;
color: #fff;
position: absolute;
font-size: 30px;
text-decoration: none;
width: 40px;
height: 40px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 20px;
}
#previous {
top: 80px;
left: 5px;
}
#next {
top: 80px;
right: 5px;
}
#play, #pause {
top: 80px;
left: 180px;
text-align: center;
display: block;
}
#pause {
font-size: 20px;
line-height: 34px;
}
#play {
line-height: 34px;
}
.slide {
width: 100%;
padding-bottom: 50%; /* 200/400 */
position: absolute;
top: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
transition: opacity 0.5s ease;
opacity: 0;
}
.slide span {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
}
.display {
opacity: 1;
}
.hidden {
display: none !important;
}
JS
var delay=3;
var slides=document.getElementsByClassName('slide').length;
var current=1;
var timer = setTimeout(nextSlide, delay*1000);
function nextSlide() {
var next = (current == slides ? 1 : current + 1);
$('slide' + current).classList.remove('display');
$('slide' + next).classList.add('display');
current = next;
timer = setTimeout(nextSlide, delay*1000);
}
function slideshowNext() {
slideshowPause();
var next = (current == slides ? 1 : current + 1);
$('slide' + current).classList.remove('display');
$('slide' + next).classList.add('display');
current = next;
return(false);
}
function slideshowPrevious() {
slideshowPause();
var prev = (current == 1 ? slides : current - 1);
$('slide' + current).classList.remove('display');
$('slide' + prev).classList.add('display');
current = prev;
return(false);
}
function slideshowPause() {
clearTimeout(timer);
timer = false;
$('pause').classList.add('hidden');
$('play').classList.remove('hidden');
return(false);
}
function slideshowPlay() {
$('pause').classList.remove('hidden');
$('play').classList.add('hidden');
nextSlide();
return(false);
}
function showControls(slideshow) {
slideshow.children[0].classList.remove('hidden');
}
function hideControls(slideshow) {
if (timer) {
slideshow.children[0].classList.add('hidden');
}
}
function $(id) {
return(document.getElementById(id));
}

Having a div with buttons over a video

I have a video in my page and I would like to have a div with specific controls over the video instead of the regular ones.
I have tried setting the div to absolute but even though the buttons appear, they are not clickable.
Is there any way (without jquery) to do this where the buttons in the div are above the video and clickable?
Video:
<div id="divVideo" style="text-align:center">
<video id="video1" width="720" autoplay loop>
<source src="01_vid.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
Buttons (they have a small script):
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮&#9646</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
Script (probably unnecessary):
var myVideo = document.getElementById("video1");
function playPause(btn) {
if (myVideo.paused) {
myVideo.play();
btn.innerHTML = "▮&#9646"
} else {
myVideo.pause();
btn.innerHTML = "&#9658"
}
}
function muteUnmute(etc) {
if (myVideo.muted) {
myVideo.muted = false
etc.innerHTML = "Mute"
} else {
myVideo.muted = true;
etc.innerHTML = "Unmute"
}
}
function goHD(el) {
if (myVideo.width != 1280){
myVideo.width = 1280
el.innerHTML = "SD"
}
else{
myVideo.width = 720
el.innerHTML = "HD";
}
}
This is my CSS:
#botoes {
float: center;
position: absolute;
bottom: 0; z-index: 1;
width: 100%;
text-align: center;
margin-bottom: 10px;
}
#divVideo {
position: relative;
width: 720px;
float: left;
height: 405px;
}
#video {
position: relative;
width: 720px;
height: 405px;
background-color: blue;
float: left;
display: block;
}
How do I make the buttons float over the video (that is inside a div)?

I cannot add a realistic video here. So imagine the image to be a video.
.video {position: relative; width: 350px;}
.video img {display: block;}
.video .buttons {position: absolute; bottom: 0; z-index: 1; width: 100%; text-align: center;}
<div class="video">
<img src="http://placehold.it/350x150" />
<div class="buttons">
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮&#9646</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
</div>
</div>
If you wanna make it only appear once you hover your mouse over the video, there you go:
.video {position: relative; width: 350px;}
.video img {display: block;}
.video .buttons {position: absolute; bottom: 0; z-index: 1; width: 100%; text-align: center; display: none;}
.video:hover .buttons {display: block;}
<div class="video">
<img src="http://placehold.it/350x150" />
<div class="buttons">
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮&#9646</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
</div>
</div>

video {
width: 300px;
height: auto;
}
div {
background: rgba(255, 255, 255, .85);
height: 50px;
width: 500px;
position: relative;
top: -50px;
padding: 5px;
}
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div>
<button>Start</button>
<button>End</button>
</div>