lazysizesで掲載したYouTubeがiOSで再生できない件について

投稿 2018年07月03日
18
カスタマイズ
FC2TemplateLazyloadingLazysizesCustomizeVanilla_JS高速化中級者向け

うーーん。これは困りました (´・ω・`)

lazysizesで遅延読み込みを指定しているYouTubeがiPhoneで再生できないようです。
「YouTubeが」「iOSで」と書いていますが、その他動画サービス及びAndroid OSでは未検証なのでこの表現を取っています。

パソコンでの再生は問題ありません。あくまでもiPhone (´・ェ・`)
再生ボタンをクリックすると この動画は再生できません と表示されます。

私の制作したテンプレートをご利用の方でも、個別記事で遅延読み込みを利用していない方、利用していても画像だけで動画は適用外にしている方については本件はスルーで構いません。

iOSのアップデートに起因?

ちょっとはっきりしませんが、iOSのアップデートあるいはアップグレードによるものではないかと。
現時点での最新は 11.4 です。もしかしたらもう少し前のバージョンから再生できなかったかも。
さっき気づいたからわからない emoji

lazysizesのiframe要素は data-src が src に書き換わらないんですよね。
なんでかは知りませんが、これは以前からそういう仕組になっています。
data- がついているということは カスタムデータ属性 ということになるんですけども、この data- が付いていることによって再生が不可となっているもよう。
画面内に動画が出てくるには出てくるんですけどね。その場での再生ができません。

載せた動画が再生できないって、それはダメだろう (´・ω・`)
iOSの一時的挙動だとしてもやっぱダメだろう… と思ふ (´・ω・`)
でも全ての動画というわけでもないんですよね。音楽系はほとんどダメだけど。
うーん、謎い。

video-embedプラグインを導入する

「YouTubeデフォルトの埋め込みコードを利用する」点にこだわりのない方におすすめする方法です。
つまり埋め込みコードはそのまま使わない。

lazysizesはiframe要素に class="lazyload" の追加と、src属性を data-src 属性に変更するだけで遅延させることが可能なので記事内に貼り付けるhtmlは埋め込みコードのコピペだけで「ほぼ」完了します。
このやり方を一旦捨てて、全く違うhtmlで掲載します。

その前にプラグインの追加を行います。以下のリンク先で vedeo-embedの圧縮ファイル のURLを取得します。
リストの一番下にあるのがそれです。
cdnを利用せず自サーバー管理にしてももちろんOKです。その場合にはlazysizesの元のファイルと統合して一つにまとめると良いですね。
Lazysizes CDN

<script async src="ここにvideo-embedファイルアドレス"></script>

lazysizesの元ファイルのすぐ下に記載してください。

CSSの追加

.box-for-video {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: .2s ease-out;
}

.play-btn {
  display: block;
  opacity: .7;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNTBweCIgaGVpZ2h0PSI1MHB4IiB2aWV3Qm94PSIwIDAgNTAgNTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPkFydGJvYXJkPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+ICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQiIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNSwxIEMxMS43NDUxNjYsMSAxLDExLjc0NTE2NiAxLDI1IEMxLDM4LjI1NDgzNCAxMS43NDUxNjYsNDkgMjUsNDkgQzMxLjM2NTE5NTgsNDkgMzcuNDY5Njg5Nyw0Ni40NzE0MzU4IDQxLjk3MDU2MjcsNDEuOTcwNTYyNyBDNDYuNDcxNDM1OCwzNy40Njk2ODk3IDQ5LDMxLjM2NTE5NTggNDksMjUgQzQ5LDExLjcyOCAzOC4yLDEgMjUsMSBMMjUsMSBaIiBpZD0iUGF0aCIgZmlsbD0iIzAwMDAwMCIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwzNCBMMjAsMTYgTDM2LDI1IEwyMCwzNCBaIiBpZD0iU2hhcGUiIGZpbGw9IiNGRkZGRkYiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==) center center /64px 64px no-repeat;
  cursor: pointer;
  transition: .2s ease-out;
}

.play-btn:hover {
  opacity: 1;
}

テンプレートのCSSソース内に .box-for-video が存在することを前提とした内容です。 レスポンシブ動画についての説明はコチラ ↓

あなたのブログの動画はスマートフォンではみ出してるかもしれない - カスタマイズ

めちゃくちゃ多いんですよ。スマートフォンで動画がはみ出している 方。 今もう モバイル最優先 という時代ですが、ブログなどの記事はパソコンで書いているという方もまだ多いと思います。 スマホで長文ってキッツいですよねぇ (´・ω・`) パソコンで書いているとやっぱりパソコンの見た目に集中してしまいます。 スマホはパソコンと比べたらめっちゃ画面小さいんやで!...

htmlの書き方

これまでのようにYouTubeの埋め込みコードをそのまま貼り付けてちょっと追加変更、というわけにはいきません。
まず必要なのは動画URLの一部のみです(スクショ)

URL末尾の英数字のみ取得します。
サンプルの場合は LHCob76kigA ですね。

<div class="box-for-video lazyload" data-youtube="取得した英数字" data-ytparams="" style="max-width: 最大横幅px;">
<button class="play-btn"></button>
</div>

実物がコチラ ↓

これが従来の内容とどう違うかというと、初期表示で動画のように見えるのは 実際には動画ではなくサムネイル画像 です。
その上にダミーとしてdataURIのボタンを表示しています。
ダミーボタンをクリックして初めてiframe要素の取得が行われます。
ですから通常のiframeへのlazyよりもさらにlazyというか。
ダミークリックまでは動画でさえないというか(笑)
lazysizes素晴らしいですね。ホントによく考えられていて痒いところに手が届きすぎ。

ただ難点はiPhoneだとダミーボタンクリック後に実際のボタンを押さないと再生できません。
つまりクリックが2回必要になります。

パラメータについて

htmlコードの中に data-ytparams というのがあります。
ここがYouTubeのパラメータを記入する部位です。
通常のやり方だと正規URLに最初のパラメータは ? で繋ぎ、2つ目以降のパラメータは &amp; で繋いで一続きのURLにします。
lazysizesのvideo-embedの場合はURLとパラメータを分けています。
パラメータの種類については以下のページを参照のこと。
YouTube iframe API

? は使いません。複数指定の場合は &amp; で繋ぎます。

例)

data-ytparams="rel=0&amp;iv_load_policy=3"

遅延読み込みと今回の方法の性質上「自動再生不可」であるという点は説明不要かと思いますが少しだけ説明をすると、autoplayのパラメータはダミーボタンクリックと連動して再生が始まるようになってます。
(iframe要素取得すると同時に自動再生されるという意味です)
それであたかもダミーボタンクリックで再生が始まったかのように見えるわけですね。
そしてスマホデバイスでは元々autoplayは許可されていませんのでこの方法で問題なし(賢い!)
スマホでクリックが二度必要になるのはこのためです。

まとめ

特殊なhtmlを使いますので躊躇されるかもしれませんね。
といってもlazyload系JSは一度でも利用すれば利用を中止した後には何も表示されなくなってしまいます。
なので恒久的に利用を継続するか、中止するならば 対象要素のhtmlを全部書き直す ことになるのは自明の理です。
そういう意味で普通の書き方と異なっていても問題はない(と個人的に思う)
どうせ書き直すんだし(笑)

iOSの動向次第でiframeの動画再生が復活するかもしれませんが、それはそれとしてこのvideo-embedを用いる方がさらに効果的だと思いますのでご一考ください。

サムネイルがNo imageの場合(追記)

現在のYouTubeサムネイルの推奨サイズは width : height = 1280 : 720 (アスペクト比16:9, 単位はpx)です。
比較的古い時期(2013年以前?)にアップロードされた動画は大きめのサムネイルが作成されていないことがあります。

https://i.ytimg.com/vi/ここに数字/default.jpg

上記がYouTubeのサムネイルの基本URLで、緑色文字列の部位でサイズを振り分けています。

mqdefault 120 × 90
default 320 × 180
hqdefault 480 × 360
sddefault 640 × 480
maxresdefault 1280 × 720

embed-videoで自動取得されるサムネイルは推奨よりも1段階小さい sddefault です。
ところが古い動画では大きめサイズのサムネイルが設定されていないこともあり、その場合には代替として以下のようなNo image画像が表示されます。

実寸 120×90 の画像ですので動画の指定サイズがそれ以上であれば引き伸ばされて表示されます。
これだと動画が「削除された等の理由で再生できない」と勘違いされてしまうかもしれません。

この場合の対処として少し強引なものになりますが、以下のような形を提案したいと思います。

基本htmlに一部追加。

<div class="box-for-video lazyload" data-youtube="番号" data-ytparams="" style="max-width: 最大横幅px;">
  <img class="lazyload video-noimage" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="ここに画像" alt="">
  <button class="play-btn"></button>
</div>

緑が追加部位です。当然ですがlazyload用の記述です。

続いて以下の内容をスタイルシートへ。

.video-noimage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

この方法がどうしても好ましくないと思われる方は、embed-videoのJSファイルを編集して最初からsdではなくhqを取得するように変更しても良いと思います。
sddefault でファイル内検索すると1箇所ありますので、その部分を hqdefault に変更するだけです。
その代りCDNサーバーが使えなくなるのと、動画を500, 600といった大きいサイズで掲載する方は解像度が足りません。
なのでおすすめはしませんが、古い動画を載せることの方が多いという場合にはこの方が理に適ってますね (´・ω・`)
その方が良いかもしれないなぁ (´・ェ・`)

JSで自動取得した画像は取り消し・打ち消しが効きませんので、別の画像を上に被せるという少し強引な処理になります。 最後の動画がサムネイル追加のサンプルです。

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

18 COMMENTS

There are no comments yet.

ロビンソン  

画像が取得できない?

お世話になります。
video-embedプラグインを導入してlazysizesで遅延読み込みを指定しているYouTubeの記事を修正しました。
https://filipinadating.blog.fc2.com/blog-entry-27.html

普通に再生されますが、5つある動画のうち4つに画像が表示されません。
動画の投稿者さんによる設定などが原因なのでしょうか?

他にも今回の修正をしていない同様の記事があるのですが、私のiPhone(iOS11.3.1)では再生されます。
ある事情でiOSのアップデートをしたくないので検証できませんが、再生できないなら画像なしでも修正したいと思います。
大変厚かましいのですが、この記事の動画が最新iOSで再生できないか見ていただけませんか?
https://filipinadating.blog.fc2.com/blog-entry-21.html

お時間のある時にでもチェックしていただけたらありがたいのですが・・・
よろしくお願いします。

2018/07/05 (Thu) 17:49
vanillaice (Akira)

Akira  

To ロビンソンさん

こんばんは ('0')/

拝見しました。
私知らなかったのですが、サムネイル画像はYouTubeがデフォルトで用意するのではなくユーザー任意設定なんですね。
ユーザーが未指定にした場合には勝手にYouTubeが付けてくれるものだとばかり (´・ω・`)

で、ちょっと考えたんですが、これはまた少しトリッキーなことをして対処するしかなさそうですね。
サムネイル画像取得の可不可を確認した上で、まずhtmlを

<div class="box-for-video lazyload ifnoimage" data-youtube="取得した英数字" data-ytparams="" style="max-width: 最大横幅px;">
<button class="play-btn"></button>
</div>

赤字のクラス名を追加。
続いてCSSは対象htmlのすぐ上に以下の内容をstyle要素(<style>CSS内容</style>)で追加するか、スタイルシートに追加するかのいずれか。

.ifnoimage::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: url(ここに画像アドレス) center center /cover no-repeat;
}
.ifnoimage .play-btn {
z-index: 3;
}
.ifnoimage iframe {
z-index: 5;
}

画像については静止状態の時にキャプチャするなどで対処。
または
https://i.ytimg.com/vi/ここに数字/default.jpg

default(120X90)
mqdefault(320X180)
hqdefault(480X360)
sddefault(640X480)
maxresdefault(1280X720)

defaultならたぶん全て取得できます。hqdefaultまではいけるかも。
sd以降は任意のようなので取得できないんじゃないかと。

---------
再生チェックは以下のような結果でした。

Be my lady --- サムネイルなし/ 再生不可
How could u stay --- サムネイルあり/ 再生可
Forevermore --- サムネイルあり/ 再生不可
U've made me stronger --- サムネイルあり/ 再生可
Closer u n i --- サムネイルあり/ 再生可

再生不可が何故不可なのかよくわからないですよねぇ (´・ェ・`)
iOSは過去にもiframeの再生バグがありました。確か9だったような…。
table要素内の一番上のiframeだけ何故か再生できない(2番目以降は正常)とかそんなだったような気が。うろ覚えです。

lazysizesのissue報告にも上がってるのは上がってるんですが、iOSのアップがごく最近だったせいかはっきりしないみたいです。取り急ぎの対処としては上記のような形になるかと思います。

サムネイルは自動取得で変更が効かない(No image用を特定することも消すこともできない)ので、z-indexを駆使して被せるという方法です。
仮にiOSのバグだったと仮定し、そちらが修正されたとしても今回の内容とは無関係なので書き直しの手間は発生しないはずです。
発生するとすれば動画のアップロード主がサムネイルを追加した時(笑)

2018/07/05 (Thu) 20:20

ロビンソン  

To Akiraさん

お世話になります。
htmlにクラス名"ifnoimage"を追加して、それぞれの上にstyle要素を加えましたが、変わらないようです。
https://filipinadating.blog.fc2.com/blog-entry-27.html

ただHTML内にstyle要素を加える方法は経験がないので、もしかして変な書き方になっているかもです(汗)

再生チェックありがとうございました。
なんだか再生できたり、できなかったり悩ましいですね(苦笑)

最悪は画像なしで表示するか、他の動画を探すなり記事の内容を変更してでも遅延読み込みは使用したいです。

質問時に書き漏らしましたが、テンプレートはClassicaです。

※追記です
画像はurl指定で取得しました。

2018/07/06 (Fri) 00:29
vanillaice (Akira)

Akira  

To ロビンソンさん

改行の扱いを「自動」にしている場合はhtmlもCSSも横一繋ぎに書かないとダメですよ。

×
<style>
.xxx {
font-size: 1.2em;
}
</style>

<div id="xxx">
あいうえお
</div>


<style>.xxx {font-size: 1.2em;}</style>
<div id="xxx">あいうえお</div>

style要素の終了タグの後ろで改行しても<br>が一つ付きますので間隔(空白行)を作りたくない場合には
〜省略</style><div 〜省略
こうしてやはり繋げる必要があります。
htmlを記事内で扱う時は改行を「htmlタグのみ」にされることをおすすめします。

----
hqdefault なら全部取得できるみたいですね。
解像度が低くはなりますが(サイズが小さいため)仕方がないですね (´・ω・`)
古め(随分前の年月にUPされたもの)は今みたいにretinaとかなんとかそういう概念が無かったので600超えサムネイルの需要が低かったのかも。

2018/07/06 (Fri) 01:24

ロビンソン  

To Akiraさん

ご迷惑をお掛けします。
やはり書き方が間違っていたようで、教えていただいたように書いたらサムネイル表示されました。
しかし、書いていく内にstyle要素を加えた他の動画のサムネイルも上書きされて行きます。

それから、表示画像の画質が劣化して見えます。
https://filipinadating.blog.fc2.com/blog-entry-27.html

2018/07/06 (Fri) 01:53
vanillaice (Akira)

Akira  

To ロビンソンさん

今スマホからなのでカンでお答えします(笑)
すみません ( ̄∀ ̄;)

そうですよね。それぞれ画像が違うのだからスタイルシートに入れていいわけなかった(汗)
style要素での対処のみでお願いします。
対象が複数の場合は

ifnoimage::after
から
background: 省略
の一行を消し、

一つ目、二つ目、三つ目の順で

ifnoimage:first-of-type::after {
background: 省略;
}
ifnoimage:nth-of-type(2)::after {
background: 省略;
}
ifnoimage:nth-of-type(3)::after {
background: 省略;
}

と別々に指定してください。
全てstyle要素の中にまとめてOKです。
style要素は対象一つに一つづつ書くのではなく、一番最初の対象のすぐ上に一度だけ書いてくださいね。
あるいはさっきスタイルシートはなしと書きましたが、基本コード(画像の指定なし)だけスタイルシートに書いて、画像指定だけstyle要素でもOKです。
その方がメンテナンスは楽かもですが、テンプレート 変更時の移設がね
(´・ω・`)
そこはお任せしますね。

解像度が低いのはYouTubeの規定の問題なのでどうしようもないですね。
そのために600以上のサムネイルを取得するようになってますが、存在しないのであればサイズ違いで代替にするしか。
120を無理やり引き伸ばしてるのかもしれないですね。

よろしお願いします。

2018/07/06 (Fri) 02:09

ロビンソン  

To Akiraさん

何度も申し訳ありません。
上にある内容で書き直したところ、1番目に2番目のサムネイルが表示され、あとは表示されません。
ifnoimage:first-of-type(3)::after {
この部分を
.ifnoimage:nth-of-type(3)::after {
に変えても同じでした。

画質については、言われるように代替画像を当てようと思います。

あと、私の方は教えていただいて試した結果をすぐにご報告するようにしていますが、かなり古い記事なので特に慌ててはおりませんので念の為。

2018/07/06 (Fri) 03:01
vanillaice (Akira)

Akira  

To ロビンソンさん

こんにちは (o'ω')ノ

追記の方に
<div style="display: none;">
を頭に持つ要素(中にsectionが入っているもの)があります。
この中にある文章は隠しテキスト(UXに関わりのないもの, 展開不能なもの)になりますのでSEOにもマイナスですし、これが阻害しています。
この要素を消せばちゃんと出るようになりますよ。

あとlyricのidが全てduplicate(重複)です。
同ページ内に複数ある要素はidでなくclassを使ってください。

今日は時間が取れそうにないのでお言葉に甘えてお返事遅れると思います。
よろしくお願いします ('0')/

2018/07/06 (Fri) 11:52

ロビンソン  

To Akiraさん

お世話になります。

該当ページ内の5つの動画全てから「a id="lyrics"」と<div style="display: none;">~</div>を削除しました。
現在の状況は下記の通りです。
1. 画像表示あり
2. 3の画像が表示
3. 画像なし
4. 今回の修正前から正常に表示
5. 画像なし
https://filipinadating.blog.fc2.com/blog-entry-27.html

ご確認よろしくお願いします。

2018/07/06 (Fri) 13:29
vanillaice (Akira)

Akira  

To ロビンソンさん

ではこうしましょう。

【基本CSS】
.ifnoimage::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
}
.ifnoimage .play-btn {
z-index: 3;
}
.ifnoimage iframe {
z-index: 5;
}

【html】
<div id="addbg-1" class="box-for-video lazyload ifnoimage" data-youtube="取得した英数字" data-ytparams="" style="max-width: 最大横幅px;">
<button class="play-btn"></button>
</div>

注意:
一つ目のid名 addbg-1
二つ目のid名 addbg-2
三つ目のid名 addbg-3
......

【style要素】
<style>
#addbg-1::after {
background: url(ここに1の画像アドレス) center center /cover no-repeat;
}
#addbg-2::after {
background: url(ここに2の画像アドレス) center center /cover no-repeat;
}
#addbg-3::after {
background: url(ここに3の画像アドレス) center center /cover no-repeat;
}
</style>

この方が確実ですね。記述内容は増えますが。
div要素は無いように思いましたがたぶん入っているんだと思います。

--------- 追記
ありました(笑)
右の方に目次へ戻るリンクがありましたね。左しか気にしてなかった ( ̄∀ ̄;)

id名で区別すれば確実なのでこの方法でいきましょう。
一度お試しください。

2018/07/06 (Fri) 17:25

ロビンソン  

To Akiraさん

お世話になります。
【基本CSS】をスタイルシート内にある、この記事本文の.box-for-video { background-position: center; ~ .play-btn:hover { opacity: 1;} のすぐ下に追加して、最初のhtmlのすぐ上に【style要素】を追加、各htmlにid="addbg-1"~を追加しました。
画像が表示されるようになりましたが、逆にそれまで正常に表示されていた1つが表示されなくなり、idとbackground: urlを加えたら表示されました。
ただし全ての動画が再生されません。
https://filipinadating.blog.fc2.com/blog-entry-27.html

試しに【基本CSS】も【style要素】と同じ場所に追加してみると、今度は画像だけでボタンの表示がなくなり、画像クリックで動画は再生されるようになりました。

私の書き方がおかしいのかも知れません。
またお時間のある時にご確認お願いします。
現在はボタン表示あり、再生不可の状態です。

2018/07/06 (Fri) 22:28
vanillaice (Akira)

Akira  

To ロビンソンさん

こんばんは。
video-embedプラグインが入っていないように思いますがどうでしょうか。

The way u look at meはsddefaultサムネが使えます。
(なのでifnoimage不要)
ですが出てこないということはJSファイルが稼働していません。
で、YouTubeにあったhqサイズの画像をFC2にアップロードしたところで解像度は変わらないですよ。
そのままYouTubeリンクで使う方がダウンロードの手間が省けるだけ良いと思います。

-----
記事中に今回の内容と動画サンプルとを掲載しましたのでご確認ください。
動画の表示に係るCSSは全てstyle要素として記事内に記載しています(動画のすぐ上)
あまりに取得できないパターンが多いようなら記事中にある通りJSファイルの修正をされた方が良いと思います。

2018/07/06 (Fri) 23:19

ロビンソン  

To Akiraさん

お世話になります。
すいません、ご指摘の通りでjsが入っていませんでした。
新しいことをする時にテンプレートの複製を繰り返していた中で抜けてしまったようです。
jsを追加したら全て正常に戻り、もともと表示されていた動画からはidとbackground: urlを削除しても正常に表示、再生されます。
あとはサムネイルの取得をYouTubeリンクに修正します。

ありがとうございました。
あまり何回もやり取りさせていただくので、こちらのブログの読者様が引いてしまったかもですね(汗)

それから他に同様の記事がいくつかあるのですが、別ページで同じ作業をする場合はaddbgのidを1からカウントしてもよいのか、このページで使用していない番号を使うのでしょうか?

もうひとつお尋ねしたいのですが、今回の修正でインライン要素をモーダルウィンドウで表示している部分を削除したのですが、代替として以前こちらのブログに書かれていた折りたたみスクリプトを利用できないかと思いましたが、こっちにもstyle="display: none;が含まれているので同じですよね?

2018/07/07 (Sat) 00:45
vanillaice (Akira)

Akira  

To ロビンソンさん

id名は別のページであれば重複しません。
同じページ内にある時だけ問題になります。
なので1からカウントして大丈夫ですよ。

「インライン要素」のモーダル
の意味がちょっとよくわからないです。
インライン要素というのは displayの値がinlineのものを指すのでdivとか使ってたらインライン要素ではないですね (´・ω・`)
html内に書いてるモーダルってことかしら。というか通常は(document writeや innerHTMLなど以外は)全部htmlに書くわけなんですが。まぁそれは別に重要じゃないか。

折りたたみスクリプトは展開できますので特に問題ないと思います。
今回のものは展開ボタンが見当たらなかったので削除をおすすめしました。
UXのためのdisplay: noneならば大丈夫だと思いますよ。

-----
思ったんですけど、ロビンソンさんの場合No image率高いですよね。
やっぱJSファイルを編集した方が良いかもしんない (´・ω・`)
lazyloadにこだわりがあるということなので、あるいは以下のような書き方の方が良いかも。

--- 記事内容を書き換えましたのでそちらを参照してください ---


寧ろこっちの方が良いですよね?要素が増えてしまいますがこっちならサムネイルもlazyですしstyle要素要らないし。
コロコロ変えちゃってすまません。おまかせします ^^;

もう一つ注意がありました。
IE11もフォローしたいんでしたよね。確か。
この方法の場合には .video-noimage のobject-position: center center; の下に
font-family: 'object-fit: cover; object-position: center center';
も追加してください。IE用のポリフィルです。

2018/07/07 (Sat) 01:00

ロビンソン  

To Akiraさん

お世話になります。
>サムネイルもlazyですしstyle要素要らないし。

はい、断然こちらの方がいいですね。
試してみたら表示も再生もバッチリでした・・・ただし再生ボタンを押した時に一瞬だけ毛を抜いたニコニコのようなNo image画像が表示されますが、すぐに再生が始まるので全然OKです。

>JSファイルを編集した方が良いかもしんない

確かにNo image率高いですが、せっかくsddefaultが使える動画までhqにするのは勿体無いので、ひとつずつ確認して必要なら修正します。

>今回のものは展開ボタンが見当たらなかったので削除をおすすめしました。

https://filipinadating.blog.fc2.com/blog-entry-21.html
これはまだ修正前の記事ですが、動画の上の行頭のwebアイコンが展開ボタンです。
お手数ですが、ご確認お願いします。

>lazyloadにこだわりがあるということなので
>IE11もフォローしたいんでしたよね。確か。

ここまでお気遣い頂き、御礼の言葉もありません。

また、お子様との大事な日だと書いておられましたが、大変貴重な時間を頂き重ねてお礼を申し上げます。

2018/07/07 (Sat) 02:20
vanillaice (Akira)

Akira  

To ロビンソンさん

拝見しました。
あー、これは無理だと思うますね ( ̄∀ ̄;)
小さすぎますし、アイコンには意味があって、特に展開できるものはハンバーガーだったり
https://fontawesome.com/icons/share-alt?style=solid
とういうのも展開できるかもという直感を与えるアイコンです(主にSNSシェア用)
あのアイコンだと通常は「リスト」としか思わない人が多いと思います(私もそう思いました)

モーダルの見た目はとても良いと思いますので、そのままご利用になってアイコンだけ再考されると良いかもしれません。
openの文字を加えるとか。
スマホからだとやはり押すのに苦労します。
特に私ネイルしてるのでなかなか押せなかった(汗)

あと、歌詞の掲載気をつけてくださいね。
私いくつか凍結されたので(笑)

長男を空港に迎えに行っただけなので問題ないですよ。
お気遣いありがとうございます (*`∀´*)ノ

2018/07/07 (Sat) 02:30

ロビンソン  

To Akiraさん 完了の報告です

展開ボタンに変更しました。
それからid="lyrics"と書いていたのは、記事を投稿した時にはまだ別のテンプレートを利用していて、いろいろ分からない事ばかりでした。
要素に複数のclass名が適用できることを知らなくてidにしたのだと思います。
今回全てclassに変更して、tocの除外指定も修正しました。
https://filipinadating.blog.fc2.com/blog-entry-27.html

質問事項以外のこのような凡ミスも教えて頂き助かりました。
今後ともよろしくお願いします。

2018/07/07 (Sat) 16:46
vanillaice (Akira)

Akira  

To ロビンソンさん(完了のご報告)

こんにちは ('0')/

展開有無が直感的に閲覧者に伝わるかビミョーなところですが、押しやすさは格段に上がったと思います。
お疲れ様でした

2018/07/07 (Sat) 16:57