Date().getTime();if(instance.group.length<2||current.opts.wheel===!1||(current.opts.wheel==="auto"&&current.type!=="image")){return}e.preventDefault();e.stopPropagation();if(current.$slide.hasClass("fancybox-animated")){return}e=e.originalEvent||e;if(currTime-prevTime<250){return}prevTime=currTime;instance[(-e.deltaY||-e.deltaX||e.wheelDelta||-e.detail)<0?"next":"previous"]()})}})})(document,jQuery);制作メモとか、趣味とか、雑記。FactoryホームABOUTCONTACT[js]再生後自動リダイレクトする埋込youtubeを複数設置するためのメモWEBTwitterFacebookはてブPocketPinterestLinkedInコピーコメント2023.04.14WP組み込み前提のやっていき。再生後のリダイレクトは紹介記事があるのでそれを流用させてもらうことにする。WisdomMingle.comYouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる仕組みの実例とカスタマイズ方法をお話しますwisdommingle.comコピーライト入れろってことなので一応書いておきますが詳しくはページを読んで下さい。licensehttps://github.com/YukinobuKurata/YouTubeEndPointRedirect/blob/master/MIT-LICENSE.txthttps://wisdommingle.com/youtube-iframe-api-player-video-end-point-redirect/単純に、これについての紹介は書いた。[js]埋め込みYoutube閲覧後に自動遷移を仕込む元ネタがあるので活用メモ。blog.megefeps.info2022.03.04この記事ではレスポンシブ化のメモだったのだけど、今回はwpに組み込む際のどうのこうのをやっていく。活用イメージ単純にページ内に埋め込むのであればコードをそのまま使えばいいので手間はない。wpにおいては投稿記事内に仕込みたい場合もあって、仕込むのであればyoutubeの動画idと遷移先のurlをカスタムフィールドで入力しておけば出力は問題ない。動画が1つとは限らないので、繰り返しフィールドを使うことも視野に入ってくる。複数の動画に対応したやつにカスタマイズしたいということ。参考元の記事は特定の動画1本に対しての組み方なので、そのままでは使えない。コードの理解そもそもの構成を理解する。YT.PlayerState.CUED:break}};</script>「設定用のjs」「設置場所のhtml」「出力・操作のjs」の3つで構成されている。jsはまとめてもいいけど役割で分けたほうが分かりやすいので、この考え方でやっていく。これを元にうまいことやっていく。仕様の理解と改造イメージ上記の埋め込みは重複ができない、1ページ上に1個しか設置できないということに注意。思いつくのは必要な数だけコピペしてidやら何やらを書き換えるということだけど、それをすると最後に記述したものだけが動作する。いえ不可能ということではなく、仕様に応じた書き方があるよ、という話。YouTubeプレーヤーAPIでYouTubeを複数設置するYouTubeプレーヤーAPIを使ってYouTubeを複数設置してみます。埋め込みはすぐできたのですが、onPlayerReadyで対象がどのプレーヤーなのcly7796.netこれと絡めてやっていくことになる。やっていく理解しないで手を出すと結構な火傷になる。完成イメージ3つの構成ってことで、以下の感じになる。};}</script>設定は多次元連想配列でまとめる。それを上手く展開して組み込みましょう、という感じ。関数内で各埋込への割り振り埋め込み先のidに対しての動作(この場合だとリダイレクト)を仕込む際、関数から関数を呼び出すギミックになってる。呼び出された関数は単純に書かれた処理どおりに動くよって話でしかないので、発火したHTMLに応じて処理を動的に切り替える(この場合リダイレクト先のURL変更)には対応してない。呼び出し元の関数ではループ処理から該当HTMLそれぞれに命令を書いてるんだけど、それをそのまま引っ張れない感じになってる。要するに、対応した処理を組み込むには呼び出された関数側で対象を拾ってこないといけない。これがわからないと詰む。WordPressへの組み込みページファイルに直書きすることになる動画情報の配列を作る必要があるんで、jsファイルにまとめることができない。投稿内容に応じて動的に変化するしね、仕方ないね。カスタムフィールドYoutubeのURL、リダイレクト先のURLがほしいのでこれをセットにした繰り返しフィールドを作る。動画情報に「targetID」があるけど、これは繰り返し処理の際に連番を振ればいいので、自動処理で済む。作例を、と思ったけどフィールド名とかのことがあるので、それに別に難しくないんで、コードは割愛。大枠の条件分岐として、カスタムフィールドに入力があれば諸々を出力、入力がなければ全て出力しない。入力がある場合は「jsの配列」「設置箇所のhtml」この2つをループ処理で出力する。IDは共通にしないといけないのでミスしないように注意。まとめ・サンプルコードについて出力・操作用のjsはそのまま使える。長ったらしいのでminifyで圧縮するのが便利。念のため圧縮後は動作確認するのがいい。MinifierJavaScriptのMinify(コードの軽量化)をするツールです。YT.PlayerState.CUED:break}}}};設定用のjsと出力先のHTMLは各々の都合に合わせて作る。Factory関連記事WEB[eccube3]越境EC作成のメモこれを読めば完璧というわけではない。詳細に書いててもきりがないので要点とかをまとめる。同時に動作すると両方表示してるタイミングが発生する。WEB[js]ScrollHintがちゃんと動かない場合の対処びっくりした。WEB[slick.js]各要素を任意の幅に指定する方法マニュアルに書いてあるんだけどね。案件により必要に駆られて。今回プラグイン使ってもいいんだけど使わずにいくことにしたWEB[wp]投稿記事のパーマリンクのみ階層を追加する方法functions.phpだけで完結する。コメントをキャンセルメールアドレスが公開されることはありません。※サイトΔホームWEBスポンサーリンク掲載内容について内容をパクる場合は自己責任でお願いします。内容が古い場合、環境が変わって通用しないことがあります。記事の内容は最適解ではなく、作成時点においての筆者の理解の限界であることが多々あります。修正やそもそもの宗旨替えは不定期に行われるため、活用される場合はご注意ください。Highlighterがいよいよダメっぽいので、プラグインを変更しました。古い記事は表示が壊れてるものがあります。楽天Room主に釣具とか。transaction")},s.open("GET",d,!0),s.setRequestHeader("dlm-xhr-request","dlm_XMLHttpRequest"),s.send()}}タイトルとURLをコピーしました。