yayocanのブックマーク / 2017年5月19日

yayocan id:yayocan

2017年5月19日のブックマーク (8件)

初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
yayocan 2017/05/19
自作　モーダル
リンク
YouTube Player APIを使って色々やってみる｜ Tips Note by TAM
ページに埋め込んだYouTubeをJavaScriptで制御する機会が何度かあったので、 YouTube Player API の使い方をまとめてみます。今回使用するのは、以下のIFrame API になります。 iframe 組み込みの YouTube Player API リファレンス - YouTube - Google Developers ■目次基本的な埋め込み JavaScriptでの操作プレーヤーの状態に応じて処理をするプレーヤーの準備ができてからJavaScriptでの操作を行うパラメータを設定する基本的な埋め込みまずはYouTubeプレーヤーをページに埋め込んでみます。 1.YouTubeを埋め込む場所を指定 ■HTML <div id="sample"></div> ※id="sample"内にYouTube(iframe)が埋め込まれるのではなく、#sa
yayocan 2017/05/19
youtube api
リンク
YouTube Player API Reference for iframe Embeds | YouTube IFrame Player API | Google for Developers
YouTube Player API Reference for iframe Embeds Stay organized with collections Save and categorize content based on your preferences. The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript. Using the API's JavaScript functions, you can queue videos for playback; play, pause, or stop those videos; adjust the player volume; or retrieve inf
yayocan 2017/05/19
youtube api
リンク
YouTube Player API Reference for iframe Embeds | YouTube IFrame Player API | Google for Developers
YouTube Player API Reference for iframe Embeds Stay organized with collections Save and categorize content based on your preferences. The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript. Using the API's JavaScript functions, you can queue videos for playback; play, pause, or stop those videos; adjust the player volume; or retrieve inf
yayocan 2017/05/19
youtube api
リンク
YouTubeのプレイヤーAPIを使ってみた【JavaScript】 - あぷすた
どうもこんにちは。あっきぃです。最近YouTubeの動画プレイヤーをコードから操作したい感じで震えが止まらなくなってしまったので、今回は「YouTube JavaScript Player API」を使ってみようと思います。 1.YouTubeを再生する要素を追加いい感じのIDを振っておきましょう。 var tag = document.createElement('script'); tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var ytplayer; function onYouT
yayocan 2017/05/19
youtube api
リンク
同一ページ内でYouTubeを複数設置したときに、同時再生をさせないようにする
同一ページ内でYouTubeプレーヤーを複数埋め込んだとき、通常だと同時に再生することができてしまいます。実装前のデモページ今回はこれを回避する方法を考えてみました。対応方法案対応方法として、以下の3案を考えました。 YouTubeプレーヤーではなくサムネイルを設置するようにして、サムネイルをクリックしたらライトボックスを表示して再生するようにする。 YouTubeプレーヤーの設置を一つだけにして、代わりにサムネイルを設置。サムネイルをクリックでYouTubeプレーヤーのURLが切り替わるようにする。 YouTubeプレーヤーをクリックして再生したときに、他に再生しているYouTubeプレーヤーがあったら停止させる。今回はYouTubeプレーヤーを複数埋め込むことが決まっていたたので、3番目を実装してみました。ただ、実装するのは3案どれでも問題なさそうなので、場合に応じ
yayocan 2017/05/19
youtube api
リンク
オリジナル画像のツイートボタンを設置する方法 | design Edge
Twitterのツイートボタンを設置する機会がありましたので、自作のオリジナル画像にする方法を備忘も兼ねてまとめておきます。独自の画像を使用したボタンの設置は過去にも経験がありましたが、あまり機会がなくすっかり忘れていました…。今後のためにもここにメモしておきますので、デザイン重視でのWebサイトを作成など、ボタンをカスタマイズする際のご参考になれば幸いです。基本的な構造は以下ソースの通りです。 HTML <a href="http://twitter.com/share?text=【ツイート文】&url=【共有するURL】&hashtags=【ハッシュタグ】" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolb
yayocan 2017/05/19
ツイッター　share オリジナル画像　ツイートボタン twitter
リンク
オリジナル画像のFacebookシェアボタンを設置する方法 | design Edge
SNS Web コーディング Facebookのシェアボタンをオリジナル画像にカスタマイズして設置する方法をメモ。ツイートボタンをオリジナル画像にする場合などもそうでしたが、設置方法をすぐ忘れてしまい、毎回のように調べるところからやっているような気がします…。そういう暮らしとはさよならしたいので、備忘としてメモしておきます。 1.はじめにprefix／xmlns まずは、以下の呪文を唱えておきます。 HTML5の場合
yayocan 2017/05/19
facebook　シェア　オリジナル画像
リンク
- 2017年5月23日
- 2017年5月19日
- 2017年5月16日