Positioning and Video Practice


by Jeremy Caudle
notes

Today's practice was interesting. I got my first arcade cabinet in Animal Crossing New Horizons today and I thought to myself, how difficult would it be to place a video on the screen of the arcade cabinet? Turns out it was a little tricky and I'm not sure if I can distort it with just CSS to simulate the type of screen that you might see on a real arcade cabinet. It served as a good refresher on the video element and will probably only work properly if your browser supports autoplay on videos. It doesn't work on iOS Safari.

View the code:

HTML and JS 
<div class="codedoodle-block">
        <div class="card">
            <div class="video-mask-container">
                <img src="https://jeremycaudle.com/ygg/resources/acarcade24bit.png" width="622" height="622" class="mask">
                <div>
                <video id="video" poster="https://jeremycaudle.com/practice/captiontest/poster.png" autoplay loop>
                    <source src="https://jeremycaudle.com/practice/captiontest/captiontest.mp4" type="video/mp4">
                    <source src="https://jeremycaudle.com/practice/captiontest/captiontest.webm" type="video/webm">
                 </video>
                </div>
            </div>
        </div>
    </div>
CSS 
/* Code Block styles */

        div.codedoodle-block {
            margin:0;
            width: auto;
            background-color: transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .card {
            border: solid 1px #dedede;
            max-width: 343px;
            max-height: 343px;
            padding: 1em;
            position: relative;
            margin: 1rem auto;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            align-content: center;
            justify-content: center;
        }

        .video-mask-container {
            position: relative;
            height: 311px;
            width: 311px;
            max-height: 311px;
            max-width: 311px;
            margin:0 auto;
            background-color: white;
        }

        .video-mask-container .mask {
            display: block;
            position: absolute;
            z-index: 30;
						width: 311px;
						height: 311px;
        }
        
        .video-mask-container div {
            position: absolute;
            top: 60px;
            right: 74px;
            z-index: 20;
            width: 47px;
            max-height: 78px;
            overflow: hidden;
            transform: rotate(16deg);
        }

        #video {
            margin: 0 auto;
            max-height: 142px;
            transform: translateX(-33%);
        }

Tags