フリーランスの働き方

フリーランスとして時間と場所にとらわれないWebデザイナーの働き方を書いています。これから独学・副業で始めたい方へ少しでも参考なればと思います。

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

Date: 2016年12月17日
Category:

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

デモ

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>

HTML

<div id="youtube_video">
	<div id="btn_play"></div>
</div>

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;
}

場所にとらわれない生き方にオススメ

私も2013年よりランサーズを利用しています。これまで数々のお客様と仕事をさせていただきました。実践を積むことでスキルアップしますので、まずは無料登録してみましょう

クラウドソーシング「ランサーズ」

私の使用しているレンタルサーバー

私が2011年から利用しているレンタルサーバー。容量は256GBもありSSDなので超高速です。運用していてストレスを感じたことがないのでオススメさせていただきています。長く使うので3年契約にすると月額1,000円になるのも魅力です。15日間の無料お試しもついています。

フリーランス・副業の方、情報交換しましょう

フリーランスや副業、異業種など様々な方との交流を募集しています。ご興味を持っていただいた方、お気軽に各種SNSよりフォローお待ちしております。

保管庫」と同じカテゴリの記事一覧

コメントをどうぞ

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。