Works

YouTube

クラスc-videoを付与した要素（ここではfigure要素）の中に、のちにiframe要素となる空のdiv要素を包括した.wrap要素と、停止中のサムネイル画像を包括した.poster要素を入れる。空のdiv要素には動画メディアのサイズを記述し、data-ytid属性にYouTubeの動画IDを指定。
さらに空のdiv要素にクラスjs-ytを付与し、.poster要素にはクラスjs-ytControlを付与。互いにdata-playero属性で「ユニークな同じ値（ここではsamplePlayer）」を指定し紐付ける。

オプション

YouTube Player APIのプレーヤーのパラメータを、data-vars属性に指定することで対応している。
主なパラメータは以下の通り。

controls: 動画プレーヤーのコントロールを表示するかどうか。デフォルトは1でコントロールを表示する。
modestbranding: 動画プレーヤーに、YouTubeのロゴを表示させないかどうか。デフォルトは0でロゴが表示される
playsinline: 動画をインライン（その要素内）で再生するかどうか。デフォルトは0で全画面で再生される。
（※おそらく全画面で再生されるのはiPhoneのみだと思われる。）
rel: 動画の再生が終了した時に表示される「関連動画」および、停止中に表示される「その他の動画」が、同じチャンネルから選択されるかどうか（ミックスリストは除く）。デフォルトは0で他チャンネルの動画も含まれる。
autoplay: プレーヤーを読み込んだときに最初の動画を自動再生するかどうか。デフォルトは0で自動再生しない。
loop: 動画をループ再生するかどうか。デフォルトは0でループ再生しない。
playlist: 動画IDをカンマ区切りのリスト形式で指定すると、data-ytid属性で指定した動画の次に、順に再生される。

ただし、パラメータのうち、controls=0、modestbranding=1、playsinline=1、rel=0は指定済みなので、例えば、YouTubeのコントロールを表示させたい場合は、data-vars属性にcontrols=1を指定すること。

仕組み

.js-ytを付与した空div要素と、.js-ytControlを付与したなんらかの要素が、data-player属性で紐付いていれば機能するので、例えばここをクリックしても再生/停止できる。

<p><code>.js-yt</code>を付与した空div要素と、<code>.js-ytControl</code>を付与したなんらかの要素が、<b>data-player属性</b>で紐付いていれば機能するので、例えば<span class="c-textlink js-ytControl" data-player="columnPlayer" aria-label="動画の再生/停止切り替え">ここをクリック</span>しても再生/停止できる。<br> また、video要素に<strong>controls属性</strong>を指定すればブラウザ依存の<b>動画UI</b>が表示される。</p> <div class="js-yt" width="640" height="360" data-player="columnPlayer" data-ytid="H2PyYFi7UX0" data-vars="controls=1&loop=1&playsinline=0&playlist=H2PyYFi7UX0,Ltw1dKg5d2Q,x8-oqyN-0uM"></div>

動画だけ設置したい

ただYouTube動画を埋め込みたいだけならば、公式の「共有」の「埋め込む」からiframe要素をコピペするとよい。
適宜src属性のURLに、パラメーター（?controls=0&modestbranding=1&playsinline=1&rel=0）を付け加えると、下のサンプルと同じ条件で設置できる。
ビューポートの幅が狭いときに動画の高さが伸縮しないのが気になる場合は、iframe要素に、スタイルaspect-ratio:16/9;とheight:auto;を指定するとよい（※ただしaspect-ratioはその動画のアスペクト比に準ずる）。

どうしてもJavaScriptを介して設置したい場合は、空div要素を設置すれば、同じように設置できる。
※再生/停止ボタンがなくてもdata-player属性にユニークな値は必要なので注意。