Stylish Embedded Youtube Videos Responsive for Blogger.

Videos are used widely along with text content in blog posts and today's article is all about how to make those embedded videos responsive plus display them inside elegant frames of your choice.
Making videos responsive is the easy task to accomplish but along with that, displaying those videos inside beautiful frames was little tedious for me.
I am going to share two different frames where first one is a image frame of blank MacBook so it appears as if video is playing inside it.

Second frame is what I have designed with pure CSS and added some cool shadows effect in the bottom using pseudo elements. I hope you'll like it.

This post you will get:

1) Display Video Inside Responsive Frame Made of Pure CSS.
2) Display Video Inside Responsive Image Frame of a Blank MacBook.
So choice is yours, they all are responsive. :)

1) Add A Beautiful Frame to Embedded Videos Using Pure CSS

I love this one because it is made with pure CSS and loads as fast as you know. :) It has got really cool design and shadows effect in the bottom.

I have also disabled the Video title Info which appears on the top of it and the related videos which appear in the end of video.

Watch the live demo given below:

Follow Steps:

• Login back to your blogger account Select your blog < Template < Edit HTML

• Save a backup of your blog template code first, now click inside the template code box.

• Search for (Ctrl+F) </b:skin> copy (Ctrl+C) the following code and paste it (Ctrl+V) before ) </b:skin>

.post-body {
    position: relative;
    z-index: 1;
 }
.tbn_css_frame_wrap {
    width: 100%;
    max-width: 560px;
    margin: 30px auto;
}
.tbn_css_frame_wrap_inner {
    position: relative;
    padding-bottom: 53%;
    height: 0;
    background-color: #000 !important;
    border: 15px solid #CACACA;
}
.tbn_css_frame_wrap_inner iframe,
.tbn_css_frame_wrap_inner object,
.tbn_css_frame_wrap_inner embed {
    position:absolute;
    top:0;
    width:100%;
    height:100%;
}
.bottomshadows
{
  position: relative;
}
.bottomshadows:before, .bottomshadows:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 0px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
}
.bottomshadows:after
{
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  right: 10px;
  left: auto;
}
@media all and (max-width: 400px) {
.tbn_css_frame_wrap_inner {
    border: 7px solid #CACACA !important;
}
.bottomshadows:before, .bottomshadows:after {
    bottom: 9px !important;
} }

HTML part For it:

<div class="tbn_css_frame_wrap">
 <div class="tbn_css_frame_wrap_inner bottomshadows">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/LxuVerR2lFU?rel=0&theme=light&hd=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
 </div>
</div>

Customization

Please take note that this time you need not to paste your embedding code from YouTube as it is so instead just replace the Video id which is highlighted in the yellow color above. You can easily get this id from the address bar of your browser. See the example:

https://www.youtube.com/embed/CqOoHHpnk0M

This is the web address of my intro video on YouTube I have uploaded so I have highlighted the unique video id in the yellow color. Copy it in the same way for your video and replace in the above HTML. Ask me in comments if you did not get it.

2) Displaying Embedded Video Inside a Responsive Image Frame:

 This is the frame of a blank MacBook. I used the border-image: property to display the image frame instead of adding the image frame with background-image: property. This is all because I wanted to make it fully responsive. When I used the image with background-image: property then I could not make it fully responsive. Video appeared to be overlapping the frame between different screen resolutions and I did not like it at all. So I decided to go with border-image: property instead which makes it neat and clean. You can use your any other image but you need to adjust the border width and border image values accordingly.

(Note:-  No Browser support for IE10 and below, works well with others browsers, even with old versions with browser specific prefix. I just hate IE)


See the live demo given below.

Css part

.tb_outer_wrap {
    width: 100%;
    max-width: 650px;
    margin: 15px auto;
}
.tb_video_wrap_macbook {
    position: relative;
    padding-bottom: 43%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
    -webkit-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCy6YZmmeZZrW61zHKY1sOK4xwhNfPnK_OK6LEfmXvzQLphuwCoQs3kxM1U_wWJSNeFhqHyM7qcYRj19NQPOtxMqqC42gfcARRlruqhAxyrZOTXtyyysYbBFMutY5uc2jom7N_3g-kk8w/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    -moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCy6YZmmeZZrW61zHKY1sOK4xwhNfPnK_OK6LEfmXvzQLphuwCoQs3kxM1U_wWJSNeFhqHyM7qcYRj19NQPOtxMqqC42gfcARRlruqhAxyrZOTXtyyysYbBFMutY5uc2jom7N_3g-kk8w/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    -o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCy6YZmmeZZrW61zHKY1sOK4xwhNfPnK_OK6LEfmXvzQLphuwCoQs3kxM1U_wWJSNeFhqHyM7qcYRj19NQPOtxMqqC42gfcARRlruqhAxyrZOTXtyyysYbBFMutY5uc2jom7N_3g-kk8w/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCy6YZmmeZZrW61zHKY1sOK4xwhNfPnK_OK6LEfmXvzQLphuwCoQs3kxM1U_wWJSNeFhqHyM7qcYRj19NQPOtxMqqC42gfcARRlruqhAxyrZOTXtyyysYbBFMutY5uc2jom7N_3g-kk8w/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    border-color: rgba(0, 0, 0, 0);
    border-width: 27px 76px 55px 76px;
    border-style: inset;
}
.tb_video_wrap_macbook iframe, .tb_video_wrap_macbook object, .tb_video_wrap_macbook embed {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
}
@media (max-width: 500px) {
.tb_video_wrap_macbook {
    border-width: 20px 62px 40px 62px;
}
@media all and (max-width: 400px) {
.tb_video_wrap_macbook {
    border: none !important;
}
}

HTML part For it:

<div class="tb_outer_wrap">
 <div class="tb_video_wrap_macbook">
<iframe width="560" height="315" src="https://www.youtube.com/embed/CqOoHHpnk0M?rel=0&amp;theme=dark&amp;controls=1&amp;showinfo=0&amp;autohide=0" frameborder="0" allowfullscreen=""></iframe>
 </div>
</div>

Customization

Replace the highlighted part with your video ID for YouTube and for Vimeo videos, just replace the full <iframe> code.

So this is it for now and I hope you guys like it. Please let me know your feedback via comments whether your liked it or not.

Any type of information please Contact us.