I am making a video player using the HTML5 video element, I have a play button that will start the video. However my problem is how I can get the play button to sit in the centre of the video. Using position or margins to push the button into the centre of the video will not work, as when you resize the window and therefore the player, the play button will move out of place.
I've tried using positioning - left/top etc, and I've used to margins with the same concept, however these do not work with a responsive video player, I'm lost with how to deal with this and was wondering if anyone had suggestions.
I am making a video player using the HTML5 video element, I have a play button that will start the video. However my problem is how I can get the play button to sit in the centre of the video. Using position or margins to push the button into the centre of the video will not work, as when you resize the window and therefore the player, the play button will move out of place.
I've tried using positioning - left/top etc, and I've used to margins with the same concept, however these do not work with a responsive video player, I'm lost with how to deal with this and was wondering if anyone had suggestions.
Share Improve this question asked Aug 28, 2019 at 13:10 TEKTEK 1001 silver badge7 bronze badges 3- 1 Please edit the question and include the HTML as well. Just the CSS isn’t useful as a minimal reproducible example. – asobak Commented Aug 28, 2019 at 13:12
- @asobak I can share some code, but the idea of the question was that what I have already tried will not work and I was wondering if people knew a way to deal with this. However, I edit the question with a video player and button – TEK Commented Aug 28, 2019 at 13:16
- Hi @Team Ecko , you need to use media queries of CSS for that. Check my code below in answer. – Sandeep Commented Aug 28, 2019 at 13:20
2 Answers
Reset to default 4For centering any thing (img, icon, text etc)
.parent_item{
position: relative;
}
.center_item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.parent_item is your video wrapper class while .center_item is you play icon or button, Also it's responsive.
You need to use media queries of CSS for adding padding and margins for a different size for different devices. Following media queries will help you to code. Put your padding and margin CSS code inside it for varies device viewports.
<style>
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
/* Your CSS Code for this device size */
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
/* Your CSS Code for this device size */
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
/* Your CSS Code for this device size */
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
/* Your CSS Code for this device size */
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
/* Your CSS Code for this device size */
}
/* According to Mobile Orientation */
@media only screen and (orientation: landscape) {
/* Your CSS Code for this device orientation */
}
</style>