JSFiddle - React, Tailwind, and code Playground

by codemeasandwich

HTML

<div id="app"></div>

React

const VideoPlayer = () => {
    const [isMuted, setIsMuted] = React.useState(true);
    const videoRef = React.useRef(null);

    const toggleMute = () => {
        setIsMuted(!isMuted);
        if (videoRef.current) {
            videoRef.current.muted = !isMuted;
        }
    };

    return (
        <div style={{ position: 'relative' }}>
            <video 
                ref={videoRef}
                width="640"
                height="360"
                loop
                autoPlay
                muted={isMuted}
                style={{ display: 'block', width: '100%', height: '100%' }}
          
            >
                <source 
                    src="https://s3.thenightsky.com/web/vids/HAWZtGJqyRnPRmoLuJU0z4MEPEI_optimized.mp4" 
                    type="video/mp4" 
                />
                Your browser does not support the video tag.
            </video>
            <button 
                onClick={toggleMute} 
                style={{
                    position: 'absolute',
                    top: 20,
                    right: 20,
                    fontSize:'30px',
                    backgroundColor: 'rgb(29 166 114)',
                    borderRadius: '35px',
                    cursor: 'pointer',
                    border: 0,
    height: 60,
    width: 60,
    boxShadow: "5px 5px 5px #0006"
                }}>
                {isMuted ?  '🔈':'🔇'}
            </button>
        </div>
    );
};


ReactDOM.render(<VideoPlayer />, document.querySelector("#app"))