/************************************************/
/* 動画を囲む親枠（ここをドラッグで可変にする） */
/************************************************/
.resizable-container {
	width: 300px;			/* 初期サイズ（横） */
	height: 180px;			/* 初期サイズ（縦） */
	min-width: 240px;		/* 縮小できる最小の横幅 */
	min-height: 148px;		/* 縮小できる最小の縦幅 */
	max-width: 800px;		/* 拡大できる最大の横幅 */
	max-height: 480px;		/* 拡大できる最大の縦幅 */
	overflow: hidden;		/* はみ出し防止 */
	padding: 0 0px 4px 0;	/* つまみ（右下）を操作しやすくする隙間 */
	margin-left: 4px;

	/* --- ドラッグ可変にする魔法のCSS --- */
	resize: both;			/* 縦横どちらもドラッグ可能にする */
	background: #048;		/* 右下のつまみ（白/黒線）を見えやすくする背景色 */

	/* --- 追加: スクロールバーと斜線が表示される --- */
	overflow:auto;
	position: relative;
}
.resizable-container:hover {
	outline: 4px solid wheat;	/* 枠線をつける */
	box-shadow: 0 4px 12px rgba(0, 4, 0, 0);	/* 影をつける */
}

/* 中の動画（親枠のサイズに常に100%追従させる） */
.resizable-container video {
	width: 100%;
	height: 100%;
	object-fit: contain;	/* 動画の縦横比を崩さずに枠に収める */
	background: #000;

	/* --- 追加: 動画上のドラッグを邪魔しないため??? --- */
	pointer-event: none;

}
/* iframeでも可能だった(^.^)よ */
.resizable-container iframe {
	width: 100%;
	height: 100%;
	object-fit: contain;	/* 動画の縦横比を崩さずに枠に収める */
	background: #000;

	/* --- 追加: 動画上のドラッグを邪魔しないため??? --- */
	pointer-event: none;

}
/* imgではまだうまくいかない(^^; */
.resizable-img {
	max-width: 100%;
	height: auto;
	object-fit: contain;	/* 動画の縦横比を崩さずに枠に収める */
}
/****
.resizable-container img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
	pointer-event: none;
}
****/
/********************************************************/

/* 右下のドラッグマーク（自作アイコン） */
.resizable-container-x::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 12px;
  height: 12px;
  
  /* 右下下がりの斜め縞模様で「つまみマーク」を作る */
  background: linear-gradient(
    135deg,
    transparent 30%,
    #ffffff 30%, #ffffff 40%,
    transparent 40%, transparent 60%,
    #ffffff 60%, #ffffff 70%,
    transparent 70%, transparent 90%,
    #ffffff 90%
  );
  
  /* マウスが乗った時に「サイズ変更可能」なカーソルに変える */
  cursor: nwse-resize;
  pointer-events: none; /* アイコン自体がドラッグの邪魔をしないようにする */
  opacity: 0.7;
  transition: opacity 0.2s;
}

/* コンテナにマウスが乗ったらマークを少し明るくする */
.resizable-container-x:hover::after {
  opacity: 1;
}