サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021-11-18 17:20
【目的】mp4動画を記事に埋め込みたい
【実施内容】テキストエディタで下記のように記述
<video style="width: 100%; max-width: 100%; height: 100%; max-height: 100%;" src="https://〇〇〇〇" muted="" autoplay="" playsinline="" loop=""></video>
【現象】ビジュアルエディタに切り替えると下記のように記述が変更され、動画ではなく静止画になってしまう。
（※playsinlineが消えるため）
<video style="width: 100%; max-width: 100%; height: 100%; max-height: 100%;" src="https://〇〇〇〇" autoplay="autoplay" loop="loop" muted="" width="300" height="150"></video>
【要望】ビジュアルエディタに切り替えても playsinline が消えないような記述の仕方もしくは設定を教えて頂けますでしょうか。
2021-11-18 22:42
前略、ryota0815さん
html５での動画の掲載はやったことがなかったのですが、テストサイトで、少しだけ試してみました。
やはり、クラッシックエディターのテキストエディターでは、なぜか自動再生しませんでした。
ブロックエディターの「カスタムHTML」ブロックに以下のように貼り付けたら、パソコンのブラウザでは、自動再生するようです。（スマホ実機では見ていません。
<video controls loop autoplay muted playsinline width="320" height="565">
<source src="http://demo01.local/wp-content/uploads/2021/11/button-hikari02.mp4" type="video/mp4">
このブラウザはビデオの埋め込みをサポートしていません。
</video>
なにしろ詳しくないので間違っているかもしれません。（適当に書いたものです）
参考にさせていただいたサイト様
動画埋め込み要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
簡単に動画をWebサイトに掲載できる！videoタグの使い方と設定方法
https://www.itra.co.jp/webmedia/video_element.html
もっと詳しく方が、書き込んでくださるかも。
This post was modified 3年前 3回 by リフィトリー
ryota0815 and Yamachan11 reacted
2021-11-19 08:53
私も、
例では、autoplay="autoplay" loop="loop" を指定していませんが、指定もできます。
classはボタンと画像をオーバーライドさせたかったので追加したもので、動画の上に「ボタン・画像」を配置しない場合は不要です。
This post was modified 3年前 3回 by Yamachan11
ryota0815 reacted
2021-11-19 11:44
HTML5とHTML Living Standardとの違いとは？学習方法や資格も解説 ｜ IT・エンジニア派遣のModis https://www.modis.jp/staffing/insight/column_122/
playsinlineという属性が最近できたばかりのようです。
もしかしたらクラシックエディターが新しいHTMLに対応してなくて、余分な文字列だと認識しているのかもしれません。（完全に推測です。）
テンプレート文（定型文）を登録して使い回す方法 https://wp-cocoon.com/how-to-use-template-text/
テンプレートのショートコードならそのままHTMLが使えそうな気がします。少し手間が増えますが…。
（追記）テンプレート機能がクラシックエディターを使ってるようなので同じ動作をしそうですね…。（追記終わり）
ブロックエディターの「カスタムHTML」ブロックに以下のように貼り付けたら、パソコンのブラウザでは、自動再生するようです。
もしくはブロックエディターだとうまく動作するようなので、これを機にブロックエディターに挑戦するというのも手かと思います。
ryota0815 reacted
2021-11-20 15:50
ブロックエディターであれば動画ブロックがあり、以下の属性をブロックで指定できます。
- autoplay
- loop
- muted
- controls
- playsinline
- preload
- poster
ryota0815 reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。