いつもお世話になっております。動画の上にhtmlをオーバーレイで表示させたいのですが以下のようなイメージ https://www.youtube.com/watch?v=LoBXD0Q1RWc 何かソースコードのサンプルがあるURL もしくはソースコードがあれば頂きたいのですがよろしいでしょうか。困っております・・・

詳しい人求む！

動画の上に広告をオーバーレイで表示させたいのですが

解決済

質問者：catapalto
質問日時：2017/05/24 19:35
回答数：1件

いつもお世話になっております。
動画の上にhtmlをオーバーレイで表示させたいのですが

以下のようなイメージ

何かソースコードのサンプルがあるURL
もしくはソースコードがあれば頂きたいのですがよろしいでしょうか。

困っております・・・

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： taigoito
回答日時：2017/05/25 06:32

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<style>
.container {
position:relative;
}
.overlay {
position:absolute;
top:30px;
left:30px;
width:240px;
height:3em;
line-height:3em;
font-weight:bold;
font-size:2em;
color:#fff;
}
</style>
</head>
<body>
<div class="container"></div>
<iframe width="560" height="315" src="〇〇〇" frameborder="0" allowfullscreen></iframe>
<p class="overlay">オーバーレイテキスト</p>
</div>
</body>
</html>

上記のように、オーバーレイする要素をclass="overlay"とすると、
iframeと.overlayを内包する親要素（.container）にposition:relative;
.overlayにposition:absolute;を指定し、
.overlayのtop,leftで適用に位置を決めてください。
センタリングする場合は、親要素とiframeの高さと幅を合わせた方がやりやすいかと思います。

こういうご回答で良かったでしょうか？？