スクロールすると縮小して右下に固定

Question

表示している動画をスクロールすると縮小して右下に固定するいい方法があれば教えて下さい。

イメージとしては、YouTubeのミニプレイヤーをスクロールで発火し右下に縮小して固定（ふわっと）、上にスクロールすると元のサイズ（位置）に戻る形です。

jqueryでclassを付与し、position と transition を組み合わせて実装可能かと思いましたが、縮小するタイミングで一旦100%を挟むためかチラついてしまい何かよい方法があればご教授いただけると幸いです。

何卒よろしくお願いいたします。

<div class="wrapper">
<main>
<div class="video">
<iframe></iframe>
</div>
</main>
<aside>
</aside>
</div>

.wrapper {
	width: 100%;
	display: flex;
}
main {
	width: 80%;
	position: relative;
}
aside {
	width: 20%;
}
.video {
	aspect-ratio: 16 / 9;
	display: block;
	width: 100%;
	right: 0;
	bottom: 0;
	transition: all 0.5s ease;
}
.video iframe {
	width: 100%;
	height: 100%;
}
.video.fixed {
	width: 20%;
	position: fixed;
	right: 0;
	bottom: 0;
}

Comments

[Lhankor_Mhy]

ご提示いただいたコードでは、ちらつく、という現象が再現しませんでした。
スクリプトをご提示ください。