PAGE TOP ▲

大副業時代を生き残るためのブログ。切り売り労働からの脱却、少しでも収入をアップしたい方へ。

TOP Youtubeのサムネイルの代わりに画像を貼り付ける

Youtubeのサムネイルの代わりに画像を貼り付ける

動画サムネイルの代わりにご自身で制作した画像を表示することが出来ます。これは動画の埋め込みタグ(iframe)をjsに流し込み画像をクリックしたら消え、動画を表示するという順序で動きます。
※埋め込みタグにautoplayの設定をつけると、読み込まれたときに再生が開始されるため、最終的にはクリックで再生されたように見えます。

デモ

js
[js]
<script>
function init() {
var video = document.getElementById("youtube_video");
var playButton = document.getElementById("btn_play");
playButton.onclick = function () {
video.innerHTML = ‘<iframe width="800" height="450" src="//www.youtube.com/embed/iNJdPyoqt8U?autoplay=1" frameborder="0" allowfullscreen></iframe>’;
};
}
window.onload = init;
</script>
[/js]

HTML
[html]
<div id="youtube_video">
<div id="btn_play"></div>
</div>
[/html]

CSS
[css]
#youtube_video {
height: 450px;
margin: auto;
position: relative;
width: 800px;
}
#btn_play {
background: url(thumbnail.png);
cursor: pointer;
height: 450px;
width: 800px;
}
#btn_play:after {
border-style: solid;
border-color: transparent #fff transparent;
border-width: 30px 0 30px 50px;
content: "";
height: 0;
left: 50%;
margin: -30px auto auto -25px;
position: absolute;
top: 50%;
width: 0;
}
#btn_play:hover:after {
border-color: transparent #e5403a transparent;
}
[/css]

保管庫の関連記事一覧

タグ打ちとコーディングの違いについて。

2017年05月29日
タグとは何か。。。 まずは「タグ」とは何だろう?という所から説明します。タグとはHTMLで使用するもので例えば「こんにちは!」という文字をそのページのタイトルにしたい時 <title

ヒアリング の重要性を理解することでワンランク上がります。

2017年02月05日
ヒアリング の重要性 ヒアリング がWeb制作を行う上で最重要と考えています。段取り八分です。 例えばクライアントに確認する事が100項目あったとします。最初に全て確認しても、作業しながら

ハッキングにあったのでWordPressの運用をできるだけシンプルに考え直す。

2017年02月03日
ハッキング にあったサイトは現在ご覧頂いているこのサイトです。無事解決しているので運用を再開しているのですが、この機会にデザインも一新してみました。技術的な解決方法は色々なサイトで紹介していると思いま

ランサーズで経験を積む。

2017年02月02日
このサイトを見て頂いている方のほとんどは、未経験者や独学で勉強中の方が多いと思います。ただ実践を積み重ねないことには経験を積むことも出来ないが、経験がない人には実践を与えられる機会も少ないのが現実です

専門学校やスクールを出ないとWebデザイナーなることは出来ないのか

2016年02月06日
この質問はWEBデザイナーを目指している方からだけではなくクライアントからも「やっぱりそういった学校卒業されたのですか?」という質問をよく受けます。 私の場合は独学でした 私のお話をさせて

まずはバナー広告などのパーツを作るところから始める

2016年02月05日
私は質の高いWebサイトを作るには細部にこだわる事で全体が出来上がると考えています。会社の屋号を「DETAIL DRAWING」とした理由も詳細図という意味から細部に拘り全体を創るという思いから命名し