HP作成作成した画像を動画の上に配置したです。付属画像のような感じにしたいのですが、スマホのフチの

解決済

質問者：hayosato
質問日時：2022/02/02 12:22
回答数：2件

HP作成

作成した画像を動画の上に配置したです。付属画像のような感じにしたいのですが、スマホのフチの画像を動画の上に乗せて、

スマホの画面が動いているデザインを作りたいです。

どうしたらよいでしょうか？

今のままでは、何故か、スマホのフチの画像さえも表示されないです。元の動画の大きさは736×414です。アスペクト比はOK.　画像の元サイズは687×363pxです。

以下を提示しています。

・動画単体のURL、
・HPのURL
・画像のURL
・ソースコード
をそれぞれ提示しています。

●●ソースコードです。

<!DOCTYPE html>

<html lang="ja">

<head>
<meta content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="reset.css">
<title>ビデオ調節</title>

<style>
/* ビデオの配置 */
.test{

text-align: center;
margin-top: 100px;
margin-bottom: 250px;

}
/* ビデオの大きさを指定（絶対値のみしかできない）　＃videosize｛｝でもOK.絶対値のみ対応 */
.test video{

width: 700px;

}
/* 画像の大きさ調節 */
img.example1 {
width: 100%;
height: 400px;
text-align: center;
}

/* 画像中央配置 */
.center{
text-align: center;
}

</style>

</head>
<body>
<div class="test">
<video autoplay="" loop="" muted="" playsinline="" id="videosize">
<source src="https://rensyuu12.tokyo/PHPMailer/kk.mp4" type="video/mp4">
<img src="https://rensyuu12.tokyo/PHPMailer/sumaho.png" alt="［写真］" class="example1">
</video>
</div>
</body>

</html>

動画自体のURL
https://rensyuu12.tokyo/PHPMailer/kk.mp4
以下がHPのURLです

https://rensyuu12.tokyo/PHPMailer/201.html

画像のURL

https://rensyuu12.tokyo/PHPMailer/sumaho.png

通報する

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

質問の本文を隠す

回答 (2件)

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

参考程度に

No.2ベストアンサー

回答者： fujillin
回答日時：2022/02/02 13:44

こんにちは

＞スマホのフチの画像を動画の上に乗せて、
＞スマホの画面が動いているデザインを作りたいです。
ご説明の通りにすれば、できると思いますけれど・・

＞スマホのフチの画像さえも表示されないです。
videoタグ内の要素は代替手段の並列なので、そこにimgを記述しても、動画を表示できない時などに表示されるだけの意味になります。

重ねたいのであるなら、きちんと表示される位置に記述して、CSSの position:absoluteなどを利用して位置合わせをしてください。
https://qiita.com/praz1/items/e25044c90d0ed055b568

とは言っても、「枠の画像の画面の縦横比」は「実際の動画の縦横比」とは一致していないようですので、長辺をピッタリのサイズにすると短辺方向に余白ができますね。
長辺方向を見切ってもよいのなら、短辺のサイズを合わせるようにすれば、なんとかなるのではないかと思いますけれど・・