読者です 読者をやめる 読者になる 読者になる

WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

YouTubeのチャンネル最新動画を埋め込む

YouTubeチャンネルFeedを取得する。 https://www.youtube.com/feeds/videos.xml?channel_id=【チャンネルID】チャンネルIDを調べるには埋め込みたいYouYubeチャンネルのページへ行き、 URLを確認する。 channel/の後にある文字がチャンネルIDなので 上のURL…

YouTube API

YouTube APIを使用し、 再生、一時停止、1分前へ、1分先へ、音量アップ、音量ダウン、ミュートにする ボタンを作る。参考:developers.google.comwww.tam-tam.co.jp デモ http://efu.sakura.ne.jp/web/youtubeapi/ <div id="sample"></div> <div> <button id="play">再生</button> <button id="pause">一時停止</button> <button id="prev">1分前へ</button> <button id="next">1分先へ</button></div>

YouTube動画の切替え

ボタンを押した時に複数の動画をJavaScriptで切り替える HTML <div class="movie"> <ul class="movie__nav clearfix"> <li class="movie__select" id="vkSCLvIaCcI">動画1</li> <li class="movie__select" id="bto1GpdAKEA">動画2</li> </ul> <div class="cast__movie"> <a target="_blank" href="https://www.youtube.com/watch?v=vkSCLvIaCcI"> </a></div></div>

YouTubeのサムネイル取得方法

YouTube動画のサムネイルURL 下記アドレスの【動画ID】と【画像サイズ】を変更する。 http://i.ytimg.com/vi/【動画ID】/【画像サイズ】.jpg 画像サイズ サイズ 表記 備考 120×90 default - 120×90 1 サムネイル1 120×90 2 サムネイル2 120×90 3 サムネイ…

YouTube動画のパラメーター

基本のコード 貼り付けるYouTube動画から共有→埋め込みで出てくるソース <iframe src="動画のソース" width="560" height="315" frameborder="0" allowFullscreen> src 再生する動画のURL width,height 大きさの設定。縦横比率を間違えると歪む。 小さすぎると再生できない場合がある。 frameborder 埋め込み時のプレイヤーに枠線をつけるかどうか</iframe>…

YouTubeをレスポンシブデザインに対応させて埋め込む

HTML <div class="movie"> <iframe src="YouTubeの動画ソース"></iframe> </div> CSS .movie { position: relative; width: 100%; //動画の縦横比 padding-top: 縦幅 / 横幅 * 100; iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } 親要素にposition: relativeでiframeにposition: absolute動画の…