可変しないコンテンツをiframeで縮小して表示したい

Question

現在iframeを使って外部コンテンツをサイトに表示しようと考えたのですが大きすぎました。要素を縮めても外部コンテンツが可変ではないのでうまくいきませんでした。

<div class="test"><iframe style="transform: scale(0.5);transform-origin:right top;"
src="https://example" width="476" height="306"></iframe></div>

.test {
        width:238px;
	height:153px;
}

そこで上記の外側のdivの大きさを縮めることで"transform"の仕様であるはみ出る余白を無理矢理削ろうとしたのですがうまくいきません。
解決する方法はあるのでしょうか？
よろしくお願いいたします。

Comments

[int32_t]

このコードでどういう結果になることを期待して、実際にはどうなってしまうのですか?

Answer 1

たくさんの回答ありがとうございます。縮小表示する予定だった動画が小さすぎた場合見えないことから画像クリックで都度出現する仕様に変更いたしました。
そのため縮小表示する必要がなくなりました。
ただご回答いただいた情報は今後に役に立つと思います。本当にありがとうございました。

Answer 2

もし、縮小した iframe が 親の div にすっぽり収まって欲しいということでしたら、transform-origin:right top を transform-origin:left top に変えればよいです。

Answer 3

何が起きていて何をしたいのかがよくわからないので想像での回答になりますが、object-fit を試してみてはどうでしょうか。

object-fit - CSS: カスケーディングスタイルシート | MDN

↓CodePen にわかりやすいコードがありました。
iframe object-fit: contain