サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021年7月10日 21:02
お世話になります。
YouTube動画があるページのURL
https://okinawameguri.com/namizato-narito
https://okinawameguri.com/jack-ryan-cooley など
タイトルの通りなのですが、
本日上記の記事があるサイトをスマホで確認してみると記事内に埋め込んだYouTube動画がスマホでのみ再生できない状態になっておりました。
再生ボタンを押してもなにも反応しない状況です。ちなみにPCでは問題なく再生できます。
これはどのようにすれば、改善されますでしょうか？
2021年7月10日 21:40
takuさん
私からは、どちらのURLの動画も再生可能です。
Windows10でも、Androidでも、
（ただし、Windows10では1クリック、Androidでは2タップ必要。）
もしかすると、takuさんはiPhoneでしょうか。
iPhoneの場合は、機種名もお書きいただくと良いと思います。
iPhone他機種ユーザーの方が、確認してくださると思います。
ちなみに、以下の方法でご確認いただくといかがでしょうか。
WordPressのトラブルシューティングを劇的に楽にする「Health Check ＆ Troubleshooting」プラグインの使い方。
https://nelog.jp/health-check-and-troubleshooting-plugin
スマホからもログインして動作確認する必要があります。
わいひら reacted
Topic starter
2021年7月10日 21:49
@mk2_mk2 さん
私からは、どちらのURLの動画も再生可能です。
→ご確認ありがとうございます！再生可能なのですね。
もしかすると、takuさんはiPhoneでしょうか。
iPhoneの場合は、機種名もお書きいただくと良いと思います
→はい！私はiPhoneです！機種名はiPhoneSE2（第二世代）になります。
ちなみに、以下の方法でご確認いただくといかがでしょうか。
→ちょっとすぐに出来そうにありませんので、明日の午前中に試させて頂きます！今回もアドバイスありがとうございます！
Topic starter
2021年7月10日 21:58
少し気になっているところはページを再読み込みして、少し操作せずに待ってから再生ボタンを押すと動画が再生できることがあることです...。（2タップです。）
最近アドセンスの遅延読み込みを導入したのですが、関係ありそうですか？
This post was modified 3年前 by taku
2021年7月10日 22:07
takuさん
まずは、以下ですね。
WordPressのトラブルシューティングを劇的に楽にする「Health Check ＆ Troubleshooting」プラグインの使い方。
https://nelog.jp/health-check-and-troubleshooting-plugin
先日も、iPhoneでYouTube動画が再生できないという話があったばかりです。
その時は、結局投稿者さんが動画を撮り直し、YouTubeへアップし直しすと、再生できたようです。
元々WindowsやAndroidでは再生できていました。
iPhoneは、機種によって再生できたりできなかったり。
iPhone特有の問題の可能性があります。
（まだ分かりませんけど。）
AdSenseの遅延読み込み。。。
これはもしかして、あの悪名高きやつ？
影響はないとは思いますが、対応内容が分かりませんので、断言はできません。
どういう対応をなさったかは分かりませんが、止めておいた方が良いと思います。
何故ならば、AdSenseは何もしなくても最初から遅延読み込みされているからです。
https://wp-cocoon.com/community/postid/51872/
わいひら reacted
2021年7月10日 22:21
ちなみに、先日のiPhoneでYouTube動画が再生できなかった件は、以下です。
[解決済] iPhoneでYoutubeが再生されません
https://wp-cocoon.com/community/postid/52675/
2021年7月10日 23:06
takuさん ｍｋ２さん
YouTube動画があるページのURL
https://okinawameguri.com/namizato-narito
上記の２つのページのYoutube動画については、私のiphone6sでは、何度タップしても再生しないようです。
ちなみに、夕べ、iosのバージョンをバージョン14.4.2から14.6にアップデートしたばかりです。
iosのバージョンが関係あるかどうかは、わかりませんが・・
2021年7月11日 03:16
再生されないのはiPhoneだけではありません。
私の環境で試しました。再生できたのはWindowsのEdgeとChromeだけです。
iPhone safari ×
iPhone firefox ×
Android firefox ×
Windows firefox ×
Windows IE ×
Windows Edge 〇
Windows Chrome 〇
下記に示す現在の埋め込みの仕方を変えるべきです。
<div class="video-container">
<div class="video-click video" data-iframe="<iframe title="Jack Cooley&#039;s Top Plays Of The Season" width="1256" height="707" src=" https://www.youtube.com/embed/40JI4waqS9I?feature=oembed&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>" style="position:relative;background: url( https://i.ytimg.com/vi/40JI4waqS9I/hqdefault.jpg ) no-repeat scroll center center / cover">
<div class="video-title-grad">
<div class="video-title-text">Jack Cooley's Top Plays Of The Season</div>
</div>
<div class="video-play"></div>
</div>
</div>
2021年7月11日 05:25
Happy Tigerさん
ご連絡ありがとうございます。
今手元にはスマホしかありませんが、Android Firefoxで再生できないことは、確認致しました。
Windows10 Firefoxについては、後ほど確認するつもりです。（といってもお昼以降。）
これで、私にも確認できそうです。
ちなみに埋め込み方の問題であれば、Githubに対策版が上がっています。（ご提示のコードをきちんと確認はしておりませんが。）
それも含めて確認できると思います。
IEについては、確認は致しません。
∵YouTubeは既にIEのサポートを終了しているため
わいひら reacted
Topic starter
2021年7月11日 11:31
@HappyTiger さん
みなさまありがとうございます！
[解決済] iPhoneでYoutubeが再生されません
https://wp-cocoon.com/community/postid/52675/
上記トピックの内容を参考にし、下記のコードを子テーマのfunctions.phpに追加したところiPhoneSE2では問題なく動画が再生されるようになりました！
後は他のスマホでも再生されていればよいのですが...。
//YouTube高速化を無効にする
add_action('wp', function (){
remove_filter('embed_oembed_html', 'youtube_embed_oembed_html', 1, 3);
});
リフィトリー さん
>>takuさんはクラシックエディターをお使いでしょうか。
→私はクラシックエディターを使用し、そのままYouTubeのURL「ビジュアル」の方のエディター画面上に貼り付けて埋め込んでいます。
しかし、おそらく「YouTube高速化を無効にする」コードを追加した後にご確認いただいたかと思われます。行き違いになりすみません...。
「YouTube高速化を無効にする」コードを追加したのは本日の11:10頃になります。
This post was modified 3年前 2回 by taku
2021年7月11日 11:35
@taku さん
私のiphoneでも11時31分現在、両方のページのYoutube動画とも再生できるようになっています。
私のテスト環境の親テーマは、今日インストールしたものなので、もしかしたら、既にダウンロードできる親テーマは修正済みなのかもしれませんね。
Topic starter
2021年7月11日 11:43
@mk2_mk2 さん
◎「Health Check ＆ Troubleshooting」プラグイン については「YouTube高速化を無効にする」コードで解決できる可能性が高そうでしたので今回は試していません...。
ただ凄く便利そうなプラグインですので、今後はこちらに質問する前に使用させていただきます！ありがとうございます！
◎AdSenseの遅延読み込みについてはやはりあまり良くないのですかね？
ちなみに私がやったことは
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
上記コードを全てのアドセンス広告から削除し、
<script>
var lazyloadads = false;
window.addEventListener("scroll", function() {
if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {
(function() {
var ad = document.createElement('script');
ad.type = 'text/javascript';
ad.async = true;
ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
})();
lazyloadads = true;
}
}, true)
</script>
このコードでペ－ジがスクロールされるまでアドセンスのjavascriptを読み込ませないというものです。
PageSpeed Insightsの点数もあがり、実際の表示速度もあがったので良いかなと思っていたのですが、やはりやめておいたほうが良いですか？？
Topic starter
2021年7月11日 11:47
@leafytree さん
ご確認ありがとうございます！次回からは「YouTube高速化を無効にする」のコードを最初から追加したバージョンになるんですかね？
ともかくYouTubeの動画がスマホでも再生できるようになり大変助かりました！ご協力いただきありがとうございます！
2021年7月11日 13:03
@taku さん
ご確認ありがとうございます！次回からは「YouTube高速化を無効にする」のコードを最初から追加したバージョンになるんですかね？
おそらく、次回アップデートのリリース記事の詳細に記載してくださるのではないかと思います。
2021年7月11日 14:55
takuさん
遅くなりました。
（それにしても暑い、汗が?）
私はまだ検証はしていませんが、とりあえず解決済の様子で良かったです。
簡単にコメントさせていただきますと。
AdSenseの遅延読み込みについてはやはりあまり良くないのですかね？
このコードは、このフォーラムでも何度か見たことがあります。
お問い合わせに含まれていました。
ご本人が効果を実感なさっているようですし、自己責任で導入なさる分には特にこちらからは何も。。。ですね。
先にリンクしたトピックの通りです。
（AdSense自身にasyncが含まれていますし。このコードって、結局オンスクリーンになると全部？ということは、ファーストビュー1つでもにあると全部？）
個人的には、Page Speed Insightsは大変有用なツールだと思うのですが、踊らされ過ぎる方もたくさんいらっしゃるなという感想です。
あくまでも自己責任です。
ご確認ありがとうございます！次回からは「YouTube高速化を無効にする」のコードを最初から追加したバージョンになるんですかね？
厳密に言えば、このコードが含まれる訳ではなく、YouTube高速化そのものを働かなくするようにするみたいです。
その対策がなされたものは、既にGitHubにアップされていますので、ご自分でダウンロードしてFTPでテーマをアップデートすれば適用されます。
おそらく次回アップデートに含まれるものと思います。
（コメント化しただけのようですから。）
Topic starter
2021年7月11日 15:09
@mk2_mk2 さん
ご返信ありがとうございます！最近本当に暑いですね;;
◎AdSenseの遅延読み込みについてのアドバイスありがとうございます。
現状広告を遅延させたことで体感できる表示速度がUPし、サイトは快適に見れているよう（ページ遷移がスムーズ）に思いますので、今後の収益の変化や読者様の意見を参考にしながらどうするかを考えていきたいと思います。
>>厳密に言えば、このコードが含まれる訳ではなく、YouTube高速化そのものを働かなくするようにするみたいです。
→そうなんですね！こちらについては子テーマのfunctions.phpにYouTube高速化を無効にするコードを追記しましたので、次回cocoonのアップデート時にfunctions.phpのコードを削除しておきたいと思います。
この度も親切なご回答ありがとうございます！
2021年7月11日 15:28
ちなみに。。。
私のWindows10 Firefox環境では再現しませんでした。
テーマが新しいのが原因かと思い、2.2.9のもので試しました。
クラシックエディタで、URLを埋め込む形で試しました。
（並行して本家のiframeのものも埋め込みました）
どちらも、Windows10 Firefoxでは問題なく再生されました。
んー、再現されないということで、私の確認はもやもやです。
ただ、takuさんは解決なさったようですので、良しとしましょう。
わいひら reacted
Topic starter
2021年7月11日 16:14
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。