CSSで画像を重ねる+中央に配置する方法のメモ

1.重ねたい画像（動画）のタグを囲む新しいdivタグ(sample-box)を追加する

<div class="sample-box">
  <video id="myvideo" width="500" height="500" muted autoplay playsinline></video>
  <img class='scope' width="200" height="200"　src="https://iconlab.kentakomiya.com/wp/wp-content/uploads/2019/08/icon0140.png"/>
</div>

2.CSSに↓を追加

.sample-box {
    position: relative;
}
.scope {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

transform: translate(-50%, -50%);で画像の中央を支点に配置が可能

参考
[【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右)]
(https://arts-factory.net/position/)
[【HTML・CSS】画像の上に画像や文字を重ねる方法]
(https://public-constructor.com/display-icon-on-image/)