コーディングテクニックの実装内容
今回はWeb制作におけるYouTubeの埋め込みに関する内容です。YouTubeの埋め込み動画にパラメータを追加することで動画の再生終了時間を指定する方法をご紹介します。尚、YouTubeの動画はiframeタグを使用してプレーヤーを埋め込んでいます。
コーディングテクニックの使いどころ
YouTubeの埋め込み動画内の一部分のみユーザーに視聴してもらいたい時に使えるテクニックです。
実装難易度・必要なスキル
コーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。
実装所要時間は10分程度
CSS,JavaScriptの記述内容
実装に必要なスクリプトとスタイルはこちらになります。
.wrap {
width: 630px;
margin: 50px auto 0;
}
.movie {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.movie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width:640px) {
.wrap {
width: 100%;
}
}
実装のポイント
現在制作中
PR
法律をもっと身近にする話題のメディアサイト「法律ビッグバン」
アニメ・漫画の登場人物やゲームキャラクターの現在の年齢まとめ
TwitterやYouTube、TikTok、SNSで話題の猫(ネコ、ねこ)情報まとめ
TikTokで人気急上昇のTikToker(ティックトッカー)情報まとめ
スポンサーリンク