videoタグのcontrols属性に追記すると無効コンテンツと出る

  • 解決済 charinchi

    (@charinchi)


    3年、 2ヶ月前

    WordPress 5.5.6です。
    グーテンベルクのエディタで、動画アイコンをクリックしてメディアにアップロードした動画を選択して動画を表示させました。
    次に、動画エリアを「HTMLとして編集」に切り替え、videoタグのcontrols属性に追記すると
    videoタグのcontrols属性にパラメーターを追記して保存すると、「このブロックには、想定されていないか無効なコンテンツが含まれています。」と出てしまって困っております。

    HTMLモードにしてvideoタグのcontrols属性に追加したソースは以下です。
    動画のうえで右クリックしてもコンテキストメニューが出ないようにすること、
    そして、「ダウンロード」ボタンを非表示にすること
    これをおこなう目的です。

    ■追加前
    <video controls poster=”・・・

    ■ソース追加後
    <video controls controlslist=”nodownload” oncontextmenu=”return false;” poster=”・・・

    controls属性に、
    「controlslist=”nodownload” oncontextmenu=”return false;”」
    と追加したのです。そうすると今回の現象が起こりました。

    ちなみに、先日「poster=”～”」も同じようにHTMLモードでソースを追加したのですが、このときは今回のエラー起こりませんでした。

    「このブロックには、想定されていないか無効なコンテンツが含まれています。」の画面で、
    「解決」をクリックすると、「現在」「返還後」と二種類のHTMLソースが表示され、
    「現在」のソースは
    controls controlslist=”～

    となっていて正常なのに、「返還後」のソースはなぜか、
    controls=”” controlslist=”～
    と変更されているのです。

    一方、「解決」ボタンではなく、「そのとなりの「HTMLへ変換」ボタンを押すと、
    直接、上記の「返還後」のソースである
    controls=”” controlslist=”～
    になってしまい、
    どちらを選択しても、ビジュアルエディタに戻せなくなってしまうのです。
    ソースも勝手に「=””」と追加されていてそれが正しいのか、も怪しいですし・・・

    以下のサイトに、
    https://open-cage.com/block-recovery/

    「このとき「HTML に変換」ボタンをクリックしてしまうと、カスタム HTMLブロックに変換されてしまいます。」
    「こうなってしまうと元のブロックには戻りません。このあとで詳細設定から「ブロックに変換」を選択したとしても、クラシックブロックになってしまい、元々のレイアウトも崩れる場合もありますのでご注意ください。」

    などと書かれてあり、困ってしまいました。
    どのようにしたら改善できるでしょうか。
    ご助言賜りましたら幸いです。
    何卒宜しくお願い致します。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • Aki Hamano

    (@wildworks)

    3年、 2ヶ月前

    @charinchiさん

    はじめまして。

    Gutenbergの動画ブロックは、サイドバーの設定にある通り、videoタグについて以下の属性を設定出来ます。

    autoplay
loop
muted
controls
playsinline
poster
preload

    上記以外の属性（ controllist や oncontextmenu ）は設定出来ず、無理にHTML編集モードから追記するとブロックが壊れます。

    これはGutenbergの仕様で、このブロックに関わらず想定されていないタグ・属性を追記するとブロックが壊れる場合があります。

    そのまま保存すればサイト側では編集した通りに表示はされますが、エディタ側ではブロックは壊れたままとなります。

    上記の通り動画ブロックでは対応出来ませんが、単純にvideoタグを埋め込むだけなのであればカスタムHTMLブロックを使えば良いと思います。
    カスタムHTMLブロックであれば、書いたHTML通りに出力されるので、好きな属性を設定出来ると思います。

    新規でカスタムHTMLブロックを追加するか、参考サイトに記載されているように「HTMLに変換」のどちらかを行ってみて下さい。

    トピック投稿者 charinchi

    (@charinchi)

    3年、 2ヶ月前

    @wildworks 様
    素晴らし過ぎるアドバイス有難う御座います。感動致しました・・・。

    二点質問なのですが、

    一度壊れたら戻せないとのことで、「壊れる」というのが危機感を覚えるのですが、
    「このブロックには、想定されていないか無効なコンテンツが含まれています。」の画面で、
    「解決」をクリックするとブロックが「壊れる」とのことで、
    壊れたら困ると思うのが素人の感覚で、メッセージも「想定されていない無効のコンテンツ」と書かれてあるものですから、「このままではいけない。直さなければならない」と思っていたのです。

    しかし、ご回答を拝見していると、どうやらHTMLソースが壊れているわけではなく、完全なHTML記述しかやる方法がないよ、というだけなのでしょうか。
    おっしゃるとおり、検索していると「ブロックが壊れる」と書いてあるため、直さなきゃと思ってしまいますが、要は「ブロックが分解される。一度分解されると分解前の状態である”ブロック”には戻せないよ」ということでしょうか。

    次に、新規でカスタムHTMLブロックを追加するか、参考サイトに記載されているように「HTMLに変換」のどちらかを行ってみて下さい。とのことですが、
    ブロックで動画を仕込んで、そのあとにHTMLモードにしてソースを仕込んだら、「HTMLへ変換」が出て来るので、その流れでHTML型にしていました。でもこの行為は「ブロックを壊す」行為なので、「カスタムHTMLブロック」を最初から選択して作成するのとは違うものと思っていました。
    「ブロック」と名がついているから、ブロックが壊れていないHTMLモードなのだと思うからです。
    しかし、実は、「HTMLに変換」したあとの状態も、「カスタムHTMLブロック」と同じことだった、ということでしょうか。

    アタマがごちゃごちゃになっており、変な質問になっていたら済みません。
    宜しくお願い致します。

    Aki Hamano

    (@wildworks)

    3年、 2ヶ月前

    @charinchiさん

    こんにちは。

    「解決」をクリックするとブロックが「壊れる」とのことで、
    壊れたら困ると思うのが素人の感覚で、メッセージも「想定されていない無効のコンテンツ」と書かれてあるものですから、「このままではいけない。直さなければならない」と思っていたのです。

    「壊れる」という言葉を聞くと不安に思うかもしれませんが、あくまで影響が及ぶのはそのブロックのみであり、記事やWordPress全体に影響が出るわけではありませんので、心配なさらなくて大丈夫です。

    また、ブロック側でも対処の選択肢を示してくれている通り、「直さなきゃいけない」と受け取るのは正しい感覚だと思います。

    しかし、ご回答を拝見していると、どうやらHTMLソースが壊れているわけではなく、完全なHTML記述しかやる方法がないよ、というだけなのでしょうか。
    おっしゃるとおり、検索していると「ブロックが壊れる」と書いてあるため、直さなきゃと思ってしまいますが、要は「ブロックが分解される。一度分解されると分解前の状態である”ブロック”には戻せないよ」ということでしょうか。

    →その通りです。

    しかし、実は、「HTMLに変換」したあとの状態も、「カスタムHTMLブロック」と同じことだった、ということでしょうか。

    →その通りです。「ブロックの問題を解決」ポップアップにある「HTMLに変換」というボタンを押すと、自分が書いた（またそのせいで壊れてしまった）コードを保持した上で、カスタムHTMLブロックに変換されます。

    トピック投稿者 charinchi

    (@charinchi)

    3年、 2ヶ月前

    @wildworks さま
    重ねてのアドバイス、有難う御座います。
    サイトにはブロック限定の表現がなかったので、問題の領域を確定することができないものなのか？・・・と、手の打ちようのなさに失望していたのですが、そうですか、そういうことだったのですか。
    こんなすごいかたもおられるのだな、とアドバイスの内容に感じ入ってしまいました。
    本当に有難う御座いました！

    トピック投稿者 charinchi

    (@charinchi)

    3年、 2ヶ月前

    本スレッド、解決済みに致します。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「videoタグのcontrols属性に追記すると無効コンテンツと出る」には新たに返信することはできません。