TV & YouTube Embed

 For the little moments when you want your blog to feel like a tiny bedroom or desktop setup.

You can use this to place a YouTube video inside a TV or laptop-style frame and make it look like part of your blog's design rather than just dropping a regular YouTube embed onto the page.

Add a movie, music video, comfort show, vlog, or whatever you're currently watching.

Note: 

Before anything else, please note you are supposed to put the Video's ID and NOT the LINK or URL. The ID can be found right after the "?" on the link.

For example:

Code: 

<style>

.laptop-video {

  position: relative;

  width: 100%;

  max-width: 300px;

  margin: 0 auto;

  text-align: center;

}

/* VIDEO TITLE */

.laptop-video-title {

  margin-bottom: 6px;

  font-family: Unkempt;

  font-size: 16px;

  font-weight: bold;

  color: #000000;

  letter-spacing: 0.5px;

}

/* LAPTOP IMAGE */

.laptop-image {

  width: 100%;

  height: auto;

  display: block;

}

/* YOUTUBE SCREEN */

.laptop-screen {

  position: absolute;

  top: 18%;

  left: 8%;

  width: 85%;

  height: 58%;

  overflow: hidden;

}

.laptop-screen iframe {

  width: 100%;

  height: 100%;

  border: none;

  display: block;

}

</style>

<div class="laptop-video">

  <!-- PUT YOUR YOUTUBE VIDEO TITLE HERE -->

  <div class="laptop-video-title">

     YOUTUBE VIDEO TITLE

  </div>

  <!-- PUT YOUR LAPTOP PNG URL HERE -->

  <img

    class="laptop-image"

    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim9jv8lw1Xmrh-yKpajztNSXzkOMErzSNST9q6ydg4mV0chm7xoayqYVhCd9Tb1s_7MdZHwfKsG65WqbLDzJbn-0KCzBJSGIE_m9YaP3MmEp3DtoW9Bq-zIuuLQAVV9QOyrTrQ_SJ7JHDScB7L3rpaFfnZq4E4u6R_NVL8XdC7oW1vdw/s1600/blog%20asset.png"

    alt="Laptop"

  >

  <!-- PUT YOUR YOUTUBE VIDEO ID HERE -->

  <div class="laptop-screen">

    <iframe

      src="https://www.youtube.com/embed/YOUTUBE_ID"

      title="YouTube video"

      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

      allowfullscreen>

    

  </iframe

></div>

</img

></div>