JS memo

お洒落にJavaScript。

2019年5月8日20:04

youtubeの埋め込みに使える!お洒落でレスポンシブなデザイン

メインビジュアル

youtubeをブログに埋め込む時に地味にデザインって悩みますよね(誰?

そんな時におすすめ!流行りのコピペだけでオッケイなYoutubeの埋め込みデザインを紹介します。

目次

  1. はじめに
  2. youtubeのデザイン
  3. まとめ

はじめに

紹介するyoutubeの埋め込みの際のそれぞれのデザインはコードを表示するをクリックすると、htmlとcssがコピペできるようになっています。

またhtmlの【youtubeのURL】に埋め込みたいyoutubeのURLを貼ってください。

デザインはスマホでも表示できるようレスポンシブになっていますが、崩れた場合は修正して使用してください。

youtubeのデザイン

1テレビ風デザイン

まるでブラウン管テレビで見ているような錯覚を起こすデザイン。youtubeをグレーの枠で囲って触覚みたいなアンテナを生やして見ました。

パグの画像

コードを表示


<div class="youtube">
  <iframe src="【youtubeのURL】" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.youtube{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  height: 15rem;
  margin: 30px auto;
  padding:20px 40px;
  background: #555;
  border-radius: 10px;
}
.youtube iframe{
  width: 100%;
  height: 100%;
}
.youtube::before{
  content: "";
  width: 50px;
  height: 50px;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translate(-50%,0) rotate(-135deg);
  border-top: solid 5px #555;
  border-left: solid 5px #555;
}

2映画のフィルム風デザイン

昔の映画のフィルムのワンショットにyoutubeを埋め込んで見ました。 上下の余白を多めに取ったグレーでyoutubeを囲って、beforeとafterにbackgroundのrepeating-linear-gradientでボーダーをつけて見ました。

パグの画像

コードを表示


<div class="youtube">
  <div class="youtube-inner">
    <iframe src="【youtubeのURL】" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
  </div>
</div>

.youtube{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  height:17rem;
  background: #3F3F3F;
  padding:40px 20px;
}
.youtube-inner{
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
}
.youtube::before, .youtube::after{
  content: "";
  position: absolute;
  width:100%;
  max-width: 400px;
  height: 20px;
  left: 0;
  background:repeating-linear-gradient(90deg, #fff 0px, #fff 30px,#3F3F3F 30px,#3F3F3F 60px);
}
.youtube::before{
  top:10px;
}
.youtube::after{
  bottom:10px;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

3Macのブラウザ風デザイン

Macのブラウザでyoutubeを表示させている風なデザイン。 上の余白多めのグレーでyoutubeを囲み、Macの左上のボタンをspanタグで表現してみました。

パグの画像

コードを表示


<div class="youtube">
  <span></span><span></span><span></span>
  <div class="youtube-inner">
    <iframe src="【youtubeのURL】" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

.youtube{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  margin: 0px auto;
  background: #777;
  padding:50px 10px 10px;
  border-radius: 10px;
}
.youtube iframe{
  width: 100%;
  height: 100%;
}
.youtube span{
  position: absolute;
  width: 20px;
  height: 20px;
  top: 15px;
  border-radius: 50%;
}
.youtube span:nth-child(1){
  left: 10px;
  background-color: #d1674f;
}
.youtube span:nth-child(2){
  left: 35px;
  background-color: #e5be45;
}
.youtube span:nth-child(3){
  left: 60px;
  background-color: #72bc4a;
}
.youtube-inner{
  background: #fff;
  height: 14rem;
  padding: 15px 10px;
}

4昔のビデオ風デザイン

昔のビデオで撮影している風のデザイン。少しデザインが独特なのでブログにyoutubeを一個だけ貼る時などにおすすめ。

パグの画像

コードを表示


<div class="youtube">
  <span></span><span></span>
  <iframe src="【youtubeのURL】" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.youtube{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  height: 12rem;
  margin: 120px auto 0 auto;
  padding: 30px;
  border-radius: 10px;
  background: #3F3F3F;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
.youtube span{
  position: absolute;
  background-color: #3F3F3F;
  border-radius: 50%;
}
.youtube span:nth-child(1){
  width: 6.5rem;
  height: 6.5rem;
  top: -5rem;
  left: 5px;
  font-size: 140px;
}
.youtube span:nth-child(2){
  width: 8rem;
  height: 8rem;
  top: -7rem;
  left: 95px;
  font-size: 150px;
}
.youtube::after{
  content: "";
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translate(0, -50%);
  border-top: 70px solid transparent;
  border-right: 70px solid #3F3F3F;
  border-bottom: 70px solid transparent;
  border-radius: 100%;
}

5iPhone風デザイン

iPhoneの横画面でyoutubeを見ているようなデザイン。youtubeを囲っている背景の色をアレンジすると可愛いです。

パグの画像

コードを表示


<div class="youtube">
  <iframe src="【youtubeのURL】" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>/iframe>
</div>

.youtube{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  height: 14rem;
  margin: 0px auto;
  padding: 10px 50px;
  border: solid 3px #5555;
  border-radius: 10px;
  background: #f6f6f6;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
.youtube::before, .youtube::after{
  content: "";
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
.youtube::before{
  left: 2%;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: solid 3px #5555;
}
.youtube::after{
  right:5%;
  width: 5px;
  height: 80px;
  background: #5555;
  border-radius: 5px;
}

6撮影風デザイン

撮影中をイメージしたデザイン。borderでyoutubeに囲み枠をつけて左上にREC●を添えてみました。

パグの画像

コードを表示


<div class="youtube">
  <iframe src="【youtubeのURL】" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.youtube{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  height: 15rem;
  margin: 0px auto;
  padding: 20px;
  border: solid 3px #5555;
}
.youtube::before{
  content: "REC";
  position: absolute;
  top: -10px;
  left: 10px;
  color: #aaa;
  background-color: #fff;
  padding:0 40px 0 10px;
  font-weight: bold;
}
.youtube::after{
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border: solid 5px #aaa;
  border-radius: 50%;
  top: -10px;
  left: 65px;
  background-color: #ff0000;
}
.youtube iframe{
  width: 100%;
  height:100%;
}

まとめ

youtubeの埋め込みデザインを少し工夫するだけでもブログがお洒落になるので、ぜひ気に入ったものがあれば試して見てください