Transparent video

by pepperdigital

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video with alpha</title>
</head>
<body>

    <div style="position: absolute; font-family: sans-serif; max-width: 600px;">
        <h1>Web video with transparency demo</h1>

        <p>This text appears under the playing video, and it works in both Chrome and Safari. 
            This text appears under the playing video, and it works in both Chrome and Safari. 
            This text appears under the playing video, and it works in both Chrome and Safari. 
            This text appears under the playing video, and it works in both Chrome and Safari. 
            This text appears under the playing video, and it works in both Chrome and Safari. 
            This text appears under the playing video, and it works in both Chrome and Safari. 
            This text appears under the playing video, and it works in both Chrome and Safari. 
            This text appears under the playing video, and it works in both Chrome and Safari. 
            This text appears under the playing video, and it works in both Chrome and Safari. 
            This text appears under the playing video, and it works in both Chrome and Safari. 
            This text appears under the playing video, and it works in both Chrome and Safari. 
            This text appears under the playing video, and it works in both Chrome and Safari. 
        </p>
    </div>


    <div style="position:absolute">
       <video width="600" height="100%" autoplay loop muted playsinline>

        
         
        <source src="https://cdn.craft.cloud/ae2e44af-7564-48a3-9f29-a8239838fd98/assets/video/CEN0002-Hero-Graphic-C-hevc-safari.mp4" type='video/mp4; codecs="hvc1"'>
        <source src="https://cdn.craft.cloud/ae2e44af-7564-48a3-9f29-a8239838fd98/assets/video/CEN0002-Hero-Graphic-C.webm" type="video/webm">
        
        </video>
        

        
    ...