• HOME
  • Web制作
  • 動画のリンク先がない場合に表示を消す方法

動画のリンク先がない場合に表示を消す方法

 
 

WordPress商品サイトのテンプレートのページに、カスタムフィールドからのリンク挿入で動画が表示できるエリアを作りました♪
動画のページへの埋め込み方法は、こちらのサイトがすごくわかりやすいです。

【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ

ビデオ動画の表示
しかしWordPressのテンプレートなので、動画を設定していない商品ページまで、ビデオの表示がされてしまう。
しかも真っ黒のボックスのままで!

リンク先のない動画のボックス表示を見えなくする

ビデオのリンク先がない、表示されない
生成されるHTMLではsrcの部分がリンク先が設定されていないページのソースはvido src=unknown となっていました。
CSSでimg[src=を使うことも試したのですが、img[src=”unknown”]{display:none;}では表示は消えませんでした。
調べた結果、有効だったのがこちらです。

onerrorイベントハンドラで表示させない

htmlのvideoタグに下記のコードを入れます。
onerror=”this.style.display=’none'”

私のソースではこのようになりました。

結果

見事に消すことができました。
皆さんもぜひお試しください。

ちなみに参考にしたサイトはこちらです。

この記事もおすすめ