Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

カバームービーにポスター画像の設定をし...
 
共有:
通知
すべてクリア

[解決済] カバームービーにポスター画像の設定をしたい

15 投稿
3 ユーザー
9 Likes
160 表示
g0ng0n
(@g0ng0n)
Active Member Registered
結合: 5か月前
投稿: 8
Topic starter  

https://wao-wa.com/

いつもお世話になっております。

トップページに7MBのカバームービーを設置してますが、ユーザーの環境によっては10秒くらい真っ暗で再生されないままだとの指摘をされました。

理想は再生されるまでの間、ポスター画像を表示したいです(カバームービー上にテキストやボタンを設置しており、それはそのまま表示させたいです)

それが不可能な場合は画質を落としてムービーサイズを小さくしようと思いますが、

これまでにも別のサイトで5MB前後の動画を設置してますが、「再生されない」と指摘されたことがなかったので動画サイズだけが原因じゃないのかも?と悩んでおります。

ご教示宜しくお願い致します。

----------------------------------------------
サイト名:WA株式会社(ダブルエー)
サイトURL: https://wao-wa.com 
ホームURL: https://wao-wa.com 
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:6.0.2
PHPバージョン:7.4.30
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.9
カテゴリ数:1
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:845バイト
functions.phpサイズ:203バイト
----------------------------------------------

   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 623
 
投稿者:: @g0ng0n

真っ暗で再生されないままだとの指摘をされました。

●回答
iPhoneで低電力モードの時、videoは自動再生されません。
ムービーの先頭が黒なので、真っ暗になっているのでは?

●補足
gutenberg使っていませんが、コードエディターに切り換えて、videoタグにposter属性を追加?


   
わいひら reacted
g0ng0n
(@g0ng0n)
Active Member Registered
結合: 5か月前
投稿: 8
Topic starter  

回答ありがとうございます。言葉足らずでした。

ずっと再生されないという症状は出ておらず、10秒経過すると再生されるとのことです。

3秒のときもあれば5秒の時もあるそうで・・・

ただし、私のスマホではそのような症状出ませんし、キャッシュクリアしても遅くて1秒程度です。

先頭が黒いのは動画のせいだと思うので動画の先頭だけ画像にしようと思います

 

いずれにしてもポスター画像の設定はしたいと思っています。

投稿者:: @chu-ya

●補足
gutenberg使っていませんが、コードエディターに切り換えて、videoタグにposter属性を追加?

これをやりたいのですがわからない点があります。

コードエディターでvideoタグにポスター属性追加はきっとできるのですが、

今現在表示しているテキストとボタンの表示方法がわかりません

教えていただけると嬉しいです。


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 623
 
投稿者:: @g0ng0n

コードエディターでvideoタグにポスター属性追加はきっとできるのですが、

今現在表示しているテキストとボタンの表示方法がわかりません

どのように実現しているか理解していますか?

作りは、単にテキスト「転職支援・採用支援なら、ダブルエー 医療福祉の総合求人 企業・法人様の採用支援」、ボタンをvideoに重ねているだけです。(wp-block-cover__inner-containerをvideoに重ねている

まずは一度、以下を読みポスター属性を理解する事をお勧めします。

https://magazine.techacademy.jp/magazine/28700


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 623
 

ページを見ていて気付いたことがあり。

●現象
水平スクロールバーが表示されます。
(図参照。分かり易くする為、背景色を変更しています)

●原因
要素をはみ出させる為に計算している。
vw単位は、スクロールバーの領域も含めた横幅です。
結果、垂直スクロールバー分誤差が出た為。

●対策
以下を追加する。

html, body {
  overflow-x: hidden;
}

●疑問
子テーマCSSを使っているのに、追加CSSに記述している。
ページが1カラム(画面幅)のようなので、一部の要素に以下を用いる必要はないのでは?

    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);

   
わいひら reacted
g0ng0n
(@g0ng0n)
Active Member Registered
結合: 5か月前
投稿: 8
Topic starter  
投稿者:: @chu-ya
投稿者:: @g0ng0n

コードエディターでvideoタグにポスター属性追加はきっとできるのですが、

今現在表示しているテキストとボタンの表示方法がわかりません

どのように実現しているか理解していますか?

作りは、単にテキスト「転職支援・採用支援なら、ダブルエー 医療福祉の総合求人 企業・法人様の採用支援」、ボタンをvideoに重ねているだけです。(wp-block-cover__inner-containerをvideoに重ねている

まずは一度、以下を読みポスター属性を理解する事をお勧めします。

https://magazine.techacademy.jp/magazine/28700

丁寧に解説ありがとうございます。

私はCSSを全く理解しておらず、ネットで拾ったコードをコピペで追記しているだけの状態です。

なのでvideoに重ねるだけでも検索しながら試している感じです

https://wao-wa.com/ sub/

実際にコードエディターで設置してみました(ページ内2番目のムービー。1番上はブロックエディタでいれたものです)が、ボタンが縦に並ばず困っております。

 

投稿者:: @chu-ya

●現象
水平スクロールバーが表示されます。
(図参照。分かり易くする為、背景色を変更しています)

●原因
要素をはみ出させる為に計算している。
vw単位は、スクロールバーの領域も含めた横幅です。
結果、垂直スクロールバー分誤差が出た為。

●対策
以下を追加する。

html, body {
  overflow-x: hidden;
}

●疑問
子テーマCSSを使っているのに、追加CSSに記述している。
ページが1カラム(画面幅)のようなので、一部の要素に以下を用いる必要はないのでは?

    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);

 

スクロールバーの件、ありがとうございます。

対策コード追記しました。

 

●疑問について

これについても理解していません。背景に画像を差し込むコードをネットで拾ってコピペをした次第です。

試しに消して確認してみたところ、幅を狭めるとサイドに若干隙間ができてしまいます。(図参照)

 

宜しくお願い致します。

 


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 623
 
投稿者:: @g0ng0n

これについても理解していません。背景に画像を差し込むコードをネットで拾ってコピペをした次第です。

試しに消して確認してみたところ、幅を狭めるとサイドに若干隙間ができてしまいます。(図参照)

CSSを理解していないなら、疑問の部分を消すの止めて下さい。
対策のコードの追加のみにして下さい。


   
わいひら reacted
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 623
 
投稿者:: @g0ng0n

実際にコードエディターで設置してみました(ページ内2番目のムービー。1番上はブロックエディタでいれたものです)が、ボタンが縦に並ばず困っております。

部品カバーを使い実現していると思いますが、gutenbergエディターは全く解りません。

図のようにコードエディターに切り替え、videoタグにposter属性を追加すればいいのでは?と思い。
しかし、「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示されてしまい。
HTMLタグも理解していない方だと厳しいです、すみません。


   
わいひら reacted
g0ng0n
(@g0ng0n)
Active Member Registered
結合: 5か月前
投稿: 8
Topic starter  
投稿者:: @chu-ya
投稿者:: @g0ng0n

実際にコードエディターで設置してみました(ページ内2番目のムービー。1番上はブロックエディタでいれたものです)が、ボタンが縦に並ばず困っております。

部品カバーを使い実現していると思いますが、gutenbergエディターは全く解りません。

図のようにコードエディターに切り替え、videoタグにposter属性を追加すればいいのでは?と思い。
しかし、「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示されてしまい。
HTMLタグも理解していない方だと厳しいです、すみません。

 
とんでもないです。お忙しいところ貴重なアドバイスいただきありがとうございます。
私の勉強不足が原因なのですが、自力で調べてもどうしてもわからず質問させていただいております。
 
未解決のまま待っていてもよろしいのでしょうか?
それとも再度投稿した方がよろしいのでしょうか?
 

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4416
 

g0ng0nさん

投稿者:: @g0ng0n

それとも再度投稿した方がよろしいのでしょうか?

ちょっと、このトピックがどういう状態か、計りかねるところがありますが・・・。

件名は、「カバームービーにポスター画像の設定をしたい」とのことですので、この件に関することは、このままこのトピックに書いていただけば、良いと思います。

それ以外の件は、別トピックを立てていただくと良いと思います。
その際は、このトピックに関連していることが分かるように、このトピックをリンクしていただければと思います。

 


そして、本件についてですが、既に答えは出ているかと思います。

chu-yaさんがお書きになった通りです。

投稿者:: @chu-ya

コードエディターに切り替え、videoタグにposter属性を追加すればいいのでは?

これだけだと思います。
poster属性についても、chu-yaさんがリンクしてくださったURLに解説されています。

投稿者:: @chu-ya

まずは一度、以下を読みポスター属性を理解する事をお勧めします。

https://magazine.techacademy.jp/magazine/28700

今あるものに、poster属性を追加する・・・ということだと思います。
(コードエディタにして、HTMLをそのまま修正する)

ボタンについては、既に設置されており、これから追加する訳ではないと思いますので、関係ない話のような気がします。
(そもそも今あるということは、以前ご自身で設置なさったのでは・・・。)

 


ちなみに、g0ng0nさんのサイトの動画を、私のローカル環境に設置してみました。

そして、コードエディタでposter属性を追加しました。
poster属性では、背景が深緑色で「確認用画像」という画像を指定してあります。

私のローカル環境で、投稿ページを表示させて、リロードしてみました。

 
一瞬、poster属性の画像が表示されますので、これでうまくいっているのかな・・・と思うのですが。
 
 
ちなみに、ブロックエディタは、右のサイドバー?のようなところで、設定できないものを追加すると、エディタ上では「このブロックには、想定されていないか無効なコンテンツが含まれています」という状態に簡単になってしまいます。
 
例えば、「px指定」のものを、コードエディタで「em指定」にしただけで同様の状態になってしまいます。
 
それは、ブロックエディタのこれからの課題だと思いますし、どうしようもないので、無視していくしかないです。
 
ちなみに、poster属性を追加すると、エディタ上では以下のようになりました。
 
この状態でも、実際のページ表示は先程のGIFのように、問題なく表示されます。
 
「このブロックには、想定されていないか無効なコンテンツが含まれています」の状態になってしまうと、それ以降はHTMLをコードエディタで直接修正するしかない・・・という感じです。
HTMLが正しければ、表示に問題はないです。
 
(「ブロックのリカバリーを試行」すると、poster属性は消えると思います。)
 

 
ちなみに、該当部分は「カバーブロック」をご利用なのだと思います。
そこにボタンを追加しただけだと思います。
 
「Gutenberg カバーブロック」等で検索いただくと、使い方を解説しているサイトは見つかるはずです。
 
検索して一番上に表示されたものをリンクしておきます。
 
【Gutenberg】カバーブロックの使い方&設定方法まとめ
https://zigstyle.jp/guteneberg-cover
 
上記ページの目次に「カバーには段落・ボタン・見出しブロックが追加できる」という部分もあるみたいです。
 
他にも検索すれば見つかるはずですので、探してみてください。
 
 

 
ボタンの件は、既に追加なさっている話ですので、ご自身で追加なさったはずだと思うのですが・・・。

(環境情報が途中で切れているので・・・どういう環境・設定でご利用なのか、こちらからは分からない部分もあります。)

 
もし、どなたかにカスタマイズ依頼をなさって作成されたものであれば、その方にお問い合わせ・ご依頼いただくのが、よろしいかと思います。
 
 
長くなってしまいました。
申し訳ないです。

   
わいひら reacted
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 623
 
投稿者:: @mk2_mk2

そして、本件についてですが、既に答えは出ているかと思います。

mk2さんの言うように、これ以上の回答は不可能です。
カスタマイズ依頼された方がいいかと思います。


   
g0ng0n
(@g0ng0n)
Active Member Registered
結合: 5か月前
投稿: 8
Topic starter  

すみません。私が大きな勘違いをしておりました。

今まで、コードエディタへの切り替えをしたことが無く、

「コードエディタへ切り替えて」とのアドバイスを「ビジュアルエディタの中で【カスタムHTMLとCSS】で手打ちする」だと勘違いしていました。

自分で調べて手打ちした結果、表示がうまくいかず迷子になっていました。

 

コードエディタへの切り替えをしてポスター属性追加したらいとも簡単にできました・・・。

お恥ずかしい限りです。とても勉強になりました。

chu-yaさん、mk2さん

親切に教えてくださりありがとうございました。

 


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4416
 

g0ng0nさん

できたみたいですね、良かったです。

このトピックの途中経過を拝見して思うのは・・・。

  • どんな風にやってみたけど、できなかった
  • 分からないのは、どこなのか

 
そういう具体的なものが、途中に記載されておらず、こちらからは「何が分からないのか、分からない」という状態になってしまっているように感じました。

ご面倒だと思いますが・・・。

具体的に、

  • どんな操作をした
  • どんなコードを追加した

でも、できなかった

そういった実際になさったことを、具体的にご提示いただくと、はっきりするのではないかと思います。

今回で言えば、以下の部分ですね。

投稿者:: @g0ng0n

今まで、コードエディタへの切り替えをしたことが無く、

「コードエディタへ切り替えて」とのアドバイスを「ビジュアルエディタの中で【カスタムHTMLとCSS】で手打ちする」だと勘違いしていました。

自分で調べて手打ちした結果、表示がうまくいかず迷子になっていました。

こちらからは、こういうことは分からないですので。

こんな風にやったけれど、できなかった。

そう具体的に書いていただくと、「そうではなく、こうです」というお答えもできると思います。

 

フォーラムでのやりとりは、文字だけですし、難しいものもあります。
そういう場合は、画像(GIF動画も含めて)等をご提示いただくと伝わりやすくなったりもします。

どうやって伝えるのか。
そういう工夫が必要なのではないかとは感じました。

 

何にしても、解決なさったようで良かったです。


   
わいひら reacted
g0ng0n
(@g0ng0n)
Active Member Registered
結合: 5か月前
投稿: 8
Topic starter  

仰るとおりです。

編集画面などスクショしておけばもっと早く解決したと思います。

お手数おかけして申し訳ありませんでした、気を付けます


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4416
 

g0ng0nさんからご連絡もいただき、お問い合わせの件も解決しましたので、このトピックはクローズしてしまいます。


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な回答があった場合は「いいね!」もご活用ください。回答者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました