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カスタマイズ依頼

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

Youtube埋め込み動画の高速化機能...
 
共有:
通知
すべてクリア

[解決済] Youtube埋め込み動画の高速化機能を使用した際、本文との間に変なスペースができる

22 投稿
4 ユーザー
5 Reactions
2,325 表示
(@toshichan)
Active Member Registered
結合: 6年前
投稿: 7
トピックスターター  

こんばんは、toshiと申します。

Cocoonの埋め込み動画高速化機能を使用してYoutube動画を埋め込むと本文との間に変なスペースができてしまいます。検証の結果これはCocoonが原因ではなく、Wordpressに新しく導入されたのGutenbergによるものであることがわかりました。

Cocoonの不具合ではなかったのですが、同様なことで悩む方がいるかもしれないのでご報告します。

一応検証ページを作成しましたのでご確認ください。

Gutenbergによるyoutube埋め込み動画の高速化機能の不具合について https://hayeonsoo-time.net/gutenberg-failure/

他の原因があるかもしれないため、念のため環境を記載しておきます。

----------------------------------------------
サイト名:ハ・ヨンスの時間
サイトURL: https://hayeonsoo-time.net 
ホームURL: https://hayeonsoo-time.net 
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
Wordpressバージョン:4.9.8
PHPバージョン:5.6.21
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.2.2
カテゴリ数:7
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.5
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.0.8
Classic Editor 0.4
Contact Form 7 5.0.4
Contact Form 7 add confirm 5.1
Customizer Export/Import 0.8
Edit Author Slug 1.5.2
EWWW Image Optimizer 4.3.2
Flamingo 1.9
Gutenberg 3.9.0
SiteGuard WP Plugin 1.4.3
Slimstat Analytics 4.7.8.3
Table of Contents Plus 1601
TablePress 1.9.1
WordPress Ping Optimizer 2.35.0.1.3
WP Maintenance Mode 2.2.1
WP Multibyte Patch 2.8.1
クレジット削除 1.0.0-20160827
----------------------------------------------
以上、報告でした。

   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

ご報告いただいた上に、検証ページまでそれをいただいてありがとうございます!
おかげですぐに問題点に気づくことができました。
修正したものを以下にアップしておきました。
https://github.com/yhira/cocoon/archive/master.zip
よろしければ試してみていただけると幸いです。


   
(@toshi)
Active Member
結合: 6年前
投稿: 8
 

わいひらさん、こんばんは

早速の対応ありがとうございます。

こちらで上記修正バージョンをインストールし、不具合が解消されていることを確認しました。

私の様な初心者でもお役に立つことができて嬉しいです。

今後ともよろしくお願いします。


   
わいひら reacted
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

全然関係ないですが

もし今後Cocoonの目次機能を使おうとされている場合、見出しはh2タグから使ったほうが良さそうと思います。

今はh3から使われているので、仮に『もくじを表示させる設定』をしても表示されないからです。

ってか。この書き込み、気付かれるかしらぁ?

わいひらさんに。解決済みなので閉じちゃってくださいね。


   
(@toshi)
Active Member
結合: 6年前
投稿: 8
 

かうたっくさん

アドバイスありがとうございます。今回は目立たせようとしただけなのでこのままh3で行こうと思います。目次を使用する際はh2にしたいと思います。

便乗で質問いいでしょうか、Youtubeの高速化機能を使った場合、rel=0等のパラメータは使用できないのでしょうか。

何度かやってみたのですが、認識されないようです。

できないようでしたらあきらめます。


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

今回は目立たせようとしただけなのでこのままh3で行こうと思います。目次を使用する際はh2にしたいと思います。

そういった意図があったんですね。

h2を使っても平気な方法としては、Gutenbergの場合サイドバーを表示して以下、『もくじを表示しない』にチェックを入れても良いと思いますよ。

https://gyazo.com/6bba64eb8a5df1c09888678f61bd0483

っていう方法もあるって話です。

タイトルがh1タグなので、次にh3がくるよりh2が来たほうが個人的に良い気もしたからです。今は構造とかガチガチしてないと思うので個人的に、って話でした。

了解です❦

 

※ちなみに『ページ設定』欄に目次の設定があります。

この投稿は6年前ずつかうたっくに変更されました

   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

一応ため、動作しないURLを貼り付けていただいてよろしいでしょうか。

こちらでも、試してみましたが、ブログカード化されてしまうということでよろしいでしょうか?
WordPressの埋め込み機能(デフォルト)は、?rel=0には対応していないっぽいです。
?t=8sとかには対応してるっぽいんですけど。


   
(@toshi)
Active Member
結合: 6年前
投稿: 8
 

わいひらさま

>ブログカード化されてしまうということでよろしいでしょうか?

はい、そのとおりです。

ビジュアルエディタ上では「「このコンテンツを埋め込むことができません」と表示されます。(添付画像を参照してください。)

動作しない動画は以下の動画です。多分ほかの動画でも同様と思います。

https://www.youtube.com/watch?v=DiqiuEzbcZY

テスト用ページを作ってみました。一時的なものなので後で削除するつもりです。

https://hayeonsoo-time.net/youtube-test/

本件、やはり対応は難しそうでしょうか。

Cocoonの方で対応していただけそうであれば、あらためて「要望」の方に書き込ませていただこうと思いますがいかがでしょうか。(あまり急ぎませんので後々の対応で結構です。)

よろしくお願いします。


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

ビジュアルエディタ上では「「このコンテンツを埋め込むことができません」と表示されます。(添付画像を参照してください。)

  https://www.youtube.com/watch?v=DiqiuEzbcZY

共有 埋め込み 『動画が終わったら関連動画を表示する。』のチェックを外した時

?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>

このことでしたら、iframeをそのまま貼り付けたらキチンと反映しますけど、それではダメですか?

 

h ttps://www.youtube.com/embed/DiqiuEzbcZY?rel=0

 

このままでしたら、ブログカードになるようですが


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

消えたiframeは以下

https://notepad.pw/ny14h8uk


   
(@toshi)
Active Member
結合: 6年前
投稿: 8
 

かうたっく様

>iframeをそのまま貼り付けたらキチンと反映しますけど、それではダメですか?

CocoonのYoutube動画の埋め込み高速化機能を知る前はそのようにしていましたが、できれば高速化と関連動画非表示を両立させたいと思っています。

なぜ関連動画を表示させたくないかといいますと、関連動画にはいわゆる違法アップロードの動画が含まれており、ユーザーが誤ってそれらの動画を再生してしまうことがないようにしたいからです。

私のブログではテレビ局や音楽レーベルの公式チャンネルで公開している公式動画のみを扱いたいと思っています。

そのうえで、ページによって10数個の動画を貼ることもありうるので高速化もしたいと思っています。

ところで、Youtube動画高速化表示機能は、最初サムネール画像を表示しておいてユーザーがクリックしたら動画再生のjavaスクリプトを挿入するというような動作をするようですが、

高速化表示を用いたページのクリック前の動画をChromeのコードエディタで見ると、Wordpressのビジュアルエディタ上で「ttps://youtu.be/DiqiuEzbcZY?rel=0」(最初のhを削っています。以下同様)と入力したものが、「ttps://www.youtube.com/embed/DiqiuEzbcZY?feature=oembed&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen」と変換されています。

このパラメータはWordpress側で自動で生成して付加したパラメータだと思うのですが、ここのデフォルトパラメータをどこかで設定していると思うので、そこを変更すれば関連動画を表示しない設定もできるかもしれないと思いました。

今の私には難しいですが、時間を見てphpのソースコードでこの値を設定しているところを見つけてみようと思います。

長々と最初のタイトルとは関係ない質問に対応していただき申しわけありませんでした。

ありがとうございました。


   
わいひら reacted
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

CocoonのYoutube動画の埋め込み高速化機能を知る前はそのようにしていましたが、できれば高速化と関連動画非表示を両立させたいと思っています。

 

たしかに。その設定は離脱防止になるので、両立を希望って意味・要望したくなる気持ちががよくわかります。※そこ別のトピックで確認して際、初めて気づきました^^;

可能であるようでしたら、わいひらさんも順番に対応してくれるかもしれませんね。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

とりあえず親テーマを書き換えるだけなら、以下のテンプレートにありますよ。
lib/youtube.php

フックを使えるのであれば、以下のようなフックも用意してあるので、

return apply_filters('youtube_embed_html', $html);

子テーマのfunctions.phpで、出力HTMLを、「autoplay=1」→「autoplay=1&rel=0」と置換処理を書いても良いかもしれません。

ちょっと根本的な原因を探るには、デバッグなどをする必要があるので多少時間がかかります。
なんで、ちょっと今日は書き込みが多くてできそうにありません。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

なぜ関連動画を表示させたくないかといいますと、関連動画にはいわゆる違法アップロードの動画が含まれており、ユーザーが誤ってそれらの動画を再生してしまうことがないようにしたいからです。

これもそうなんですが、紹介した動画を見終わったら、ちゃんと自分のサイトに返ってきて欲しいので、デフォルトでrel=0をつける設定を追加しました。
https://github.com/yhira/cocoon/archive/master.zip


   
(@toshi)
Active Member
結合: 6年前
投稿: 8
 

素早い対応ありがとうございます。

ただ、早速ブログに適用させていただいたのですが、前と変わっていないようなのですが(^_^;。何か設定が必要なのでしょうか。

https://hayeonsoo-time.net/gutenberg-failure/

 

 

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

僕の環境の、ChromeやFirefoxでは問題なく表示されているようです(添付画像)。
どういった環境で閲覧されているのでしょうか。

また、ブラウザキャッシュを削除したり、ブラウザーのシークレット・プライベートモードで表示させてもダメでしょうか。


   
(@toshichan)
Active Member Registered
結合: 6年前
投稿: 7
トピックスターター  

ああ、すみません。

変わっていないのはブログカード化してしまうことではなく、関連動画が表示されてしまう方のことです。添付画像のように、埋め込みURLの中に?rel=0が付加されるものと思っていたものですから。(添付画像は上側に再生前、下側に再生後の画像をくっつけています。)

一応、ブラウザのキャッシュを削除してEdgeとChromeの両方で見てみましたが変わりませんでした。また、Chromeもシークレット・プライベートモードも試しましたが変わりませんでした。

以上、ご報告まで


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

すいません。
僕も、今日書き込みが多くて、いろいろな返信をしているうちに、つい斜め読みになってしまって、最初からの流れを読み取れていませんでした。

関連動画を表示させない修正をしたつもりだったんですが、ちゃんと反映されていなかったようです。
こちらのファイルで関連動画が表示されなくなると思います。
https://github.com/yhira/cocoon/archive/master.zip


   
(@toshichan)
Active Member Registered
結合: 6年前
投稿: 7
トピックスターター  

わいひらさま

こんどは関連動画が表示されなくなりました。

お忙しいところ本当にありがとうございます。

図々しいようですが、関連動画だけでなく以下の様なパラメータについてもCocoon設定の中でチェックボックスをOn、Offや値を入力することで設定を切り替えられるようになると便利だと思うのですが。

controls
autoplay
modestbranding
start
end

ただ、わいひらさんの負担になってしまうと申し訳ないので、このトピックではここまでで終了にしまして、あらためて「要望」の方に書かせていただきますので、今後の改良リストの優先順位の一番最後にでも加えていただければと思います。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

一応、URLパラメーターとして&rel=0&start=5等をURLに付け加えれば、そのまま反映されるようにしてみました。
https://github.com/yhira/cocoon/archive/master.zip
試してみた限りでは、ブログカードにもなりませんでした。
どうしてもブログカードになる場合は、一度テキストエディタを表示させて、ビジュアルエディターに戻したり、して再ポストするとか。
もしくは、テキストエディターで&となっているところを&に変更してみるとかでいけるかと思います。


   
(@toshichan)
Active Member Registered
結合: 6年前
投稿: 7
トピックスターター  

ありがとうございます

さっそく、自サイトに適用し正常に動作することを確認しました。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

動作確認ありがとうございます!
僕の環境以外でも、動作したようでよかったです ? 

 


   
共有:

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

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

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

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

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

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

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

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