【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。
1 2 3 4 5 6 7 8 9 |
<div class="youtube_area"> <iframe id="ytPlayer" allowfullscreen="1" allow="autoplay; encrypted-media" title="YouTube video player" src="[掲載したいYoutubeのURLによって変更]" width="640" height="390" frameborder="0"></iframe> <ul class="poster_list"> <li class="current"> <img src="[キャプチャ]" class="transition_scale" oncontextmenu="return false"> <div class="playicon"></div> </li> </ul> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
.youtube_area { position: relative; width: 100%; padding: 56.3% 0 0; overflow: hidden; } .youtube_area #ytPlayer { position: absolute; top: 0; left: 0; width: 100.5%; height: 100.5%; } .youtube_area .poster_list { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; z-index: 100; } .youtube_area .poster_list li { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; overflow: hidden; } .youtube_area .poster_list li.current { display: block; } .youtube_area .poster_list li img { width: 100.5%; } .youtube_area .poster_list li .playicon { position: absolute; top: 0; left: 0; margin: auto; width: 再生ボタンの幅; height: 再生ボタンの高さ; } .youtube_area .poster_list li .playicon::before { position: absolute; top: 0; left: 0; margin: auto; content: ''; background: url("[再生ボタン]") no-repeat; display: inline-block; width: 再生ボタンの幅; height: 再生ボタンの高さ; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script> 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 ytArea = 'ytPlayer'; var ytID = '[任意のID]'; var ytWidth = 640; var ytHeight = 390; function onYouTubeIframeAPIReady() { ytPlayer = new YT.Player(ytArea, { height: ytHeight, width: ytWidth, videoId: ytID, playerVars: { rel : 0, // 関連動画非表示 showinfo : 0, // 動画情報非表示 controls : 1, fs: 0, modestbranding: 0, enablejsapi: 1 } }); } </script> |
KOHIMOTO LABO
東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。
PICK UP