CODEWITHSUNDEEP
javascripthtmlcssvideohtml5-video
CloudSeph
CloudSeph

Reputation: 883

Change design of the bottom html video menu

My code is as below:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
    width: 100%;
    height: auto;
}
</style>
</head>
<body>

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Resize the browser window to see how the size of the video player will scale.</p>

</body>
</html>

By using the code above, I get the design below: enter image description here

How can i change the design of the menu highlighted in the image? For example, I want to change the design of the play button as well as add a full screen view button.

Upvotes: 0

Views: 2699

Answers (4)

Liam Howells
Liam Howells

Reputation: 31

Don't you think using a HTML5 player is a better option than manually styling your design? HTML5 players like video.js and Meisterplayer are customizable. However, it depends on how much you wanna customize. Here is an example of customizing the player.

Upvotes: 3

Hash
Hash

Reputation: 8040

Unfortunately the controls of the element can’t be stylized using CSS.

To do that, you will need to use a combination of JavaScript, CSS and HTML5 Media API.

Read here to make custom video player.

Upvotes: 1

Ilove112
Ilove112

Reputation: 94

First, please refer to this site. I'm not going to list the whole coding, please take a look by yourself.

You may build a custom control bar by yourself and just place it under the video.

HTML

<div id="video-container">
  <!-- Video -->
  <video id="video" width="640" height="365"></video> //your video
  <!-- Video Controls -->
  <div id="video-controls">
    <button type="button" id="play-pause">Play</button>
    <input type="range" id="seek-bar" value="0">
    <button type="button" id="mute">Mute</button>
    <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
    <button type="button" id="full-screen">Full-Screen</button>
  </div>
</div>

Then, using javascript to get each button or tag. Like var fullScreenButton = document.getElementById("full-screen"); and add the function.

Full screen function

fullScreenButton.addEventListener("click", function() {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.mozRequestFullScreen) {
    video.mozRequestFullScreen(); // Firefox
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen(); // Chrome and Safari
  }
});

Upvotes: 2

Jaime
Jaime

Reputation: 102

It's a bit more complicated than just changing a style.

I'd suggest taking a look at Tyler Fry's video player on CodePen (https://codepen.io/frytyler/pen/juGfk) to get an idea of all you can do.

Upvotes: 1

Related Questions