You cannot apply styles directly to the video player. However, what you can do is, switch off the default player controls by not writing the controls attribute into your <video> tag.

Here is how that would look like:

<video width="320" height="240">
    <source src="video.mp4" type="video/mp4">
</video>

You can now define your own controls with your markup and styles.

The <video> has to be put inside a <figure> tag where you can put in the markup for your control set which would look something like this:

<figure id="videoContainer">
    <video id="video" poster="img/poster.jpg">
        <source src="video.mp4" type="video/mp4">
    </video>
    <ul id="video-controls" class="controls">
        <li><button id="playpause" type="button">Play/Pause</button></li>
        <li><button id="stop" type="button">Stop</button></li>
        <li class="progress">
            <progress id="progress" value="0" min="0">
                <span id="progress-bar"></span>
            </progress>
        </li>
        <li><button id="mute" type="button">Mute/Unmute</button></li>
        <li><button id="volinc" type="button">Vol+</button></li>
        <li><button id="voldec" type="button">Vol-</button></li>
        <li><button id="fs" type="button">Fullscreen</button></li>
    </ul>
</figure>

Now you can put in your own styles to the control set and wire in the different controls using the Media API for html5 video.

You can read more about the whole method and the javascript part in this article: developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player

Hope it helps! 😊

if u want to change the video view in website u can use <iframe> tag instead of <video> tag

<iframe width="420" height="315" src="youtube.com/embed/XGSy3_Czz8k </iframe>

The video element allows a browser to play a video natively, as opposed to a plugin like flash, an iframe allows you to load the source of another url into your page.

In this video here from the course, the iframe is not playing the video. It's only loading a url which contains code that is playing the video.

The reason an iframe was used is because that video was being hosted on vimeo and the iframe code is required in order to embed the vimeo video onto your own web page. So the iframe isn't responsible for playing the video but rather it's responsible for loading the source of a vimeo url onto your own page. That source that is inside the iframe will either contain an object/embed code for flash or it might contain the html5 video element depending on what browser you're using.

You'll be able to see this if you use your browser dev tools to inspect the html. You can drill down into the iframe and eventually find the actual code that's playing the video.

i cant understand what you expect can u expain in detail what u need?

instead of video tag use <iframe> tag for better result