【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
WebプロダウションKOHIMOTO Inc.が発信を通して成長していくためのラボ🧪 IT企業出身。世界中の人へ発信できるWebサイトを通じて、社会がより良い方向へアップデートしていく為に日々学び、技術を生かしていきます。
PICK UP