Video.js: HTML5 Video Player Custom by seihamotion

Here is your custom code separated into the correct parts for your Blogger XML template and your individual blog posts.
I have removed the body { ... } CSS from your old code so it doesn't accidentally break your entire blog's background and layout, but kept all your custom Apple Glassmorphism and pink styling intact.

Part 1: Blogger XML Template Code

Add these to your Blogger theme so the player styling and scripts load correctly across your site.

1. Add this CSS just above </head>:

<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />

<style>

    /* CUSTOM UI STYLING: Apple Glassmorphism (Pink accent) */

    .video-container {

        width: 100%;

        max-width: 900px;

        border-radius: 12px;

        overflow: hidden;

        box-shadow: 0 20px 40px rgba(0,0,0,0.2);

        margin: 0 auto; /* Centers the player on the page */

    }

    .video-js {

        font-family: 'Courier New', Courier, monospace;

    }

    /* Control Bar - Glass Effect */

    .video-js .vjs-control-bar {

        background: rgba(30, 30, 30, 0.65) !important;

        backdrop-filter: blur(12px);

        -webkit-backdrop-filter: blur(12px);

        height: 55px;

        display: flex;

        align-items: center;

        padding: 0 10px;

    }

    /* Pink Progress Bar & Volume */

    .video-js .vjs-play-progress,

    .video-js .vjs-volume-level {

        background-color: #ff2a85; 

    }

    .video-js .vjs-play-progress:before {

        color: #fff;

        text-shadow: 0 0 4px rgba(0,0,0,0.5);

        font-size: 1.2em;

        top: -0.3em;

    }

    /* Slider Backgrounds */

    .video-js .vjs-slider {

        background-color: rgba(255, 255, 255, 0.3);

        border-radius: 4px;

    }

    .video-js .vjs-load-progress {

        background: rgba(255, 255, 255, 0.5);

    }

    /* Spacing */

    .video-js .vjs-time-control {

        display: block;

        font-size: 1em;

        line-height: 55px;

        padding: 0 5px;

    }

    .video-js .vjs-time-divider {

        padding: 0;

        min-width: 10px;

    }

    /* Hover states */

    .video-js .vjs-button:hover {

        color: #ff2a85;

        transition: color 0.2s ease;

    }

    /* Centered Big Play Button */

    .video-js .vjs-big-play-button {

        background-color: rgba(30, 30, 30, 0.65);

        backdrop-filter: blur(8px);

        border: 2px solid #fff;

        border-radius: 50%;

        width: 80px;

        height: 80px;

        line-height: 75px;

        left: 50%;

        top: 50%;

        transform: translate(-50%, -50%);

    }

    .video-js:hover .vjs-big-play-button {

        background-color: #ff2a85;

        border-color: #ff2a85;

    }

</style>{codeBox}

2. Add these Scripts just above </body>

<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/3.0.1/Youtube.min.js"></script>{codeBox}

Step 3: Paste Your Code Post

<div class="video-container">

    <video

        id="my-custom-player"

        class="video-js vjs-fluid vjs-default-skin"

        controls

        preload="auto"

        poster="YOUR-POSTER-IMAGE.jpg"

        data-setup='{ "playbackRates": [0.5, 1, 1.25, 1.5, 2] }'

    >

        <source src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" type="application/x-mpegURL">

        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">

        

        <track kind="captions" src="captions-en.vtt" srclang="en" label="English" default>

        <track kind="captions" src="captions-km.vtt" srclang="km" label="Khmer (ខ្មែរ)">

        <p class="vjs-no-js">

            To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video.

        </p>

    </video>

</div>

<script>

    const player = videojs('my-custom-player');

    player.on('texttrackchange', () => {

        Array.from(player.textTracks()).forEach(t => {

            if (t.mode === 'showing') console.log('Captions: ' + t.label);

        });

    });

</script>{codeBox}