[ 解決済 ] Outerの背景画像にmp4を設定した際にクロームで動画が自動再生しない。iPhoneやサファリPCでは自動再生されました。

VWSとは フォーラム Lightning [ 解決済 ] Outerの背景画像にmp4を設定した際にクロームで動画が自動再生しない。iPhoneやサファリPCでは自動再生されました。

[ 解決済 ] Outerの背景画像にmp4を設定した際にクロームで動画が自動再生しない。iPhoneやサファリPCでは自動再生されました。

  • このトピックには2件の返信、2人の参加者があり、最後にcocoにより6ヶ月、 1週前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #91518

    coco
    参加者

    ■ WordPress のバージョン
    WordPress 6.5.3 (Lightning テーマ)

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    バージョン: 15.21.1

    ■ Pro Unit のバージョン
    バージョン 0.26.8

    ■ スキンの種類
    Origin III

    ■ プラグインの種類・バージョン
    All-in-One WP Migration バージョン 7.81
    Category Order and Taxonomy Terms Order バージョン 1.8.1
    Contact Form 7 バージョン 5.9.4
    Lightning G3 Pro Unit バージョン 0.26.8
    VK All in One Expansion Unit バージョン 9.97.2.1
    VK Block Patterns バージョン 1.32.0.0
    VK Blocks Pro バージョン 1.72.1.0
    WP Multibyte Patch バージョン 2.9

    ■ 期待する動作
    トップページ最初のバックグラウンド「mp4動画」が再生できれば解決です。
    iPhoneやMacのSafariでは自動再生されます。

    Googleクロームで自動再生されず困っています。

    ■ 自分で試した事
    ネット検索にて下記の解決方法が書いてありました。

    「Chromeで自動再生が効いてないときはここをチェック!
    まずはChromeの場合は、前述のタグに“muted”属性を追加します。

    <video src=”sample.mp4″ autoplay muted></video> 
    Chromeでは、autoplayとmutedをセットで指定する必要があります。」

    HTMLを調整すればクロームで再生できると書かれていましたが、LightningでどのようにHTMLを変更すれば良いか?
    どこから変更すれば良いのかわからず、困り果ててこちらに質問させていただきました。

    お手数をおかけしますが、ご回答いただけましたら大変ありがたいです。
    すみませんがよろしくお願いします。

    ■ 症状が発生するブラウザ
    Google Chrome

    ■ 実際の症状
    TOPページ最初のバックグラウンド動画が自動再生しない。
    クロームでのみ発生します。


    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #91523

    mk
    モデレーター

    お世話になっております。ベクトルスタッフの松田です。

    現状、Outerブロックでは動画を設定することはできません。そのため、Google Chrome以外でも、FirefoxやMicrosoft Edgeなどでも再生できない状況です。
    iPhone(おそらくiOS Safari)やPCのSafariでは、Outerの背景画像を指定しているCSSのbackground-imageでもmp4が再生できるように設計されているため、Outerブロックを使用しても動画が再生できるようになっております。

    そのため、Outerブロックで動画を埋め込みたい場合はmp4をgif動画に変換してみてください。
    (区切りにこだわりがない場合はカバーブロックで動画を埋め込むことも可能です。)

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

    #91540

    coco
    参加者

    完璧がご回答をありがとうございました。
    素早いご返答に感謝いたします。
    また返信がおそくなりまして申し訳ありません。ベストアンサーとさせていただきます。この度はありがとうございました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。