ryandejaegher · January 15, 2024 18:22
diff --git a/codeswing.json b/codeswing.json
 {
  "scripts": [],
  "styles": []
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello</h1>
    <video-block image="cool-image" video="cool-video">
      <p slot="top-left">Top left</p>
      <p slot="top-right">Top right</p>
      <p slot="bottom-left">Bottom left</p>
      <p slot="bottom-right">Bottom right</p>
    </video-block>
  </body>
 </html>
diff --git a/script.js b/script.js
 class VideoBlock extends HTMLElement {
  static get observedAttributes() {
    return ['image', 'video'];
  }
  constructor() {
    super();

    const shadowRoot = this.attachShadow({ mode: 'open' });
    const template = document.createElement('template');

    template.innerHTML = `
      <style>
        * {
          box-sizing: border-box;
        }
        :host {
          display: block;
          width: 100%;
          aspect-ratio: 16 / 9;
        }

        :host(:hover) img {
          opacity: 0;
        }


        .video-block {
          border: 1px solid red;
          display: grid;
          height: 100%;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          grid-template-areas:
          "a b"
          "c d";
        }

        slot[name="top-left"]::slotted(*) {
          grid-area: a;
        }
        slot[name="top-right"]::slotted(*) {
          grid-area: b;
          justify-self: end;

        }
        slot[name="bottom-left"]::slotted(*) {
          grid-area: c;
          align-self: end;
        }
        slot[name="bottom-right"]::slotted(*) {
          grid-area: d;
          justify-self: end;
          align-self: end;
        }
        slot::slotted(*) {
          color: white;
          margin: 0;
        }

        figure {
          margin: 0;
          padding: 0;
          grid-column: 1 / -1;
          grid-row: 1 / -1;
          width: 100%;
          height: 100%;
          display: block;
        }

        img,video {
          object-fit: cover;
          height: 100%;
          width: 100%;
          display: block;
          grid-column: 1 / -1;
          grid-row: 1 / -1;
        }
        img {
          transition: all .3s ease-in-out;
          position: relative;
          z-index:2;
          opacity:1;
        }

      </style>
      <div class="video-block">
      <figure>
        <img src="https://source.unsplash.com/random?space" />
      </figure>
      <video playsinline autoplay muted src="https://assets.mixkit.co/videos/preview/mixkit-pink-sunset-seen-from-a-plane-window-4204-large.mp4"></video>

        <slot name="top-left"><p>Top left</p></slot>
        <slot name="top-right"><p>Top right</p></slot>
        <slot name="bottom-left"><p>Bottom left</p></slot>
        <slot name="bottom-right"><p>Bottom right</p></slot>
      </div>
      `;

    shadowRoot.appendChild(template.content.cloneNode(true));
  }

  connectedCallback() {
    console.log('connectedCallback');
  }
 }

 customElements.define('video-block', VideoBlock);
diff --git a/style.css b/style.css
 ‎‎
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<h1>Hello</h1>
	<video-block image="cool-image" video="cool-video">
	<p slot="top-left">Top left</p>
	<p slot="top-right">Top right</p>
	<p slot="bottom-left">Bottom left</p>
	<p slot="bottom-right">Bottom right</p>
	</video-block>
	</body>
	</html>
	class VideoBlock extends HTMLElement {
	static get observedAttributes() {
	return ['image', 'video'];
	}
	constructor() {
	super();

	const shadowRoot = this.attachShadow({ mode: 'open' });
	const template = document.createElement('template');

	template.innerHTML = `
	<style>
	* {
	box-sizing: border-box;
	}
	:host {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	}

	:host(:hover) img {
	opacity: 0;
	}


	.video-block {
	border: 1px solid red;
	display: grid;
	height: 100%;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:
	"a b"
	"c d";
	}

	slot[name="top-left"]::slotted(*) {
	grid-area: a;
	}
	slot[name="top-right"]::slotted(*) {
	grid-area: b;
	justify-self: end;

	}
	slot[name="bottom-left"]::slotted(*) {
	grid-area: c;
	align-self: end;
	}
	slot[name="bottom-right"]::slotted(*) {
	grid-area: d;
	justify-self: end;
	align-self: end;
	}
	slot::slotted(*) {
	color: white;
	margin: 0;
	}

	figure {
	margin: 0;
	padding: 0;
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	width: 100%;
	height: 100%;
	display: block;
	}

	img,video {
	object-fit: cover;
	height: 100%;
	width: 100%;
	display: block;
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	}
	img {
	transition: all .3s ease-in-out;
	position: relative;
	z-index:2;
	opacity:1;
	}

	</style>
	<div class="video-block">
	<figure>
	<img src="https://source.unsplash.com/random?space" />
	</figure>
	<video playsinline autoplay muted src="https://assets.mixkit.co/videos/preview/mixkit-pink-sunset-seen-from-a-plane-window-4204-large.mp4"></video>

	<slot name="top-left"><p>Top left</p></slot>
	<slot name="top-right"><p>Top right</p></slot>
	<slot name="bottom-left"><p>Bottom left</p></slot>
	<slot name="bottom-right"><p>Bottom right</p></slot>
	</div>
	`;

	shadowRoot.appendChild(template.content.cloneNode(true));
	}

	connectedCallback() {
	console.log('connectedCallback');
	}
	}

	customElements.define('video-block', VideoBlock);