Xeory Extensionについて

現在、Xeory ExtensionのテーマでＨＰを作成中です。

トップページの大きいな余白部分に動画を背景として設定したいのですが
試行錯誤しますが上手くいきません。

画像はＣＳＳで設定できますが、動画となるとＨＴＭＬも触らないといけないため
ワードプレスのＰＨＰだとどこを変更すればいいのか全く見当がつきません。

どなたか、アドバイスいただけたら幸いです。

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

行動規範の内容に同意します

回答1件

ベストアンサー

ちょっとイメージが掴めませんが

トップページの大きいな余白部分

がデモページでいう青緑色の背景の部分を指すなら、front-page.phpの

PHP
1<div id="main_visual">
2  <video></video><!-- 追加 -->
3  <div class="wrap">
4    <h2><?php echo nl2br(get_option('top_catchcopy'));?></h2>
5    <p><?php echo nl2br(get_option('top_description'));?></p>
6  </div><!-- .wrap -->
7</div>

この位置にvideoを挿入し、あとはCSSで高さを合わせ必要に応じてposition: absolute;等指定してやれば良いでしょう

【追記】

CSS
1#main_visual {
2  position: relative;
3}
4#main_visual video {
5  width: 100%;
6  height: 100%;
7  position: absolute;
8  top: 0;
9  left: 0;
10  z-index: 1;
11}
12#main_visual .wrap {
13  position: relative;
14  z-index: 2;
15}

投稿2017/12/13 01:20

編集2017/12/14 01:24

退会済みユーザー

総合スコア0

323232

2017/12/13 15:15

お世話になります。ありがとうございます。ＰＨＰの記述を指定されたように変更して mp4を埋め込んだのですが上手くいきません。。。

退会済みユーザー

2017/12/14 01:02

上手くいかないとは？動画の表示がされない・表示はされるけど位置が違うなどもう少し詳しく教えてください。

323232

2017/12/14 01:04

返信ありがとうございます。動画が表示されず、そのままの背景のままになっています。子テーマが邪魔しているのかと思い子テーマのCSSをすべて削除しても改善されせんでした。

退会済みユーザー

2017/12/14 01:06

追加したvideoタグにCSSで width: 100%; height: 100%; position: relative; z-index: 1; としても表示されませんか？

323232

2017/12/14 01:11

＞追加したvideoタグにCSSでこのCSSはどのように書けばいいのでしょうか？

退会済みユーザー

2017/12/14 01:14

videoタグに何もIDを与えてないなら #main_visual video { width: 100%; height: 100%; position: relative; z-index: 1; } こうです

323232

2017/12/14 01:19

できました！！！！ありがとうございます！！！！動画さいせいされたのですが文字が消えてしまいました文字の反映は無理でしょうか？

退会済みユーザー

2017/12/14 01:25

その場合もう少し調整しないといけないですね。回答に追記したCSSを適用させればいけると思いますさっき追加したCSSは削除して上書きしてください。

323232

2017/12/14 01:40

完璧です。ほんとにほんとにありがとうございます！！！！！！！！スマホでの表示では、大きな画像として表示されてしまうのですが CSSを @media screen and (max-width: 480px) でくくってもスマホは大きい表示（静止画）になります改善策ありますでしょうか？？

退会済みユーザー

2017/12/14 01:54

スマホでも動画を再生したいということですか？ video要素での再生はスマホでは全画面表示になってしまいautoplayなども対応していないはずなのでそこら辺はvideo要素の仕様になるので別に質問を立てた方が良いかもしれません。もしくはスマホ表示ではメディアクエリでimg(静止画)に切り替えるか、妥協してもgifが良いと思います。

323232

2017/12/14 02:02

返信ありがとうございますスマホでは、静止画を考えています。別スレッドで質問させていただきます。最後に、Xeory Extensionの質問なのですが現在、動画とヘッダー（メニューボタンがある場所）が分かれているのですがメニューの下に動画が入り背景が半透明にすることは可能でしょうか？

退会済みユーザー

2017/12/14 02:08

#header { width: 100%; background: rgba(0,0,0,0.5); position: absolute; } #gnav, #gnav ul li a { background: transparent; } 多分これでいけます。色は調整してください。

323232

2017/12/14 02:11

返信ありがとうございます動画は一番上まできたのですがメニュー（ヘッダー）がすべて消えてしまいました・・・。

退会済みユーザー

2017/12/14 02:13

スミマセン。#headerにz-index: 99999;を追加してください