Aug 5, 2016

3 Ways to Make Embedded Videos Responsive in Blogger

data:blog.title
make embedded videos responsive
Did you know this? Videos and images in all top ranked blog must be clearly seen without any cut, whether a blog is viewed from a small screen device or larger one. Now i have only one question to you, "Do you make embedded YouTube videos in your blog responsive?"

Since latest update of Google panda algorithm, website design based on responsiveness to mobile devices has become a real big deal. And all this is done in order to favor the majority of present and future generation which seems to be much based on the use of high-end mobile devices especially Smartphones Tablets and iPad.

How To Make Embedded Videos Responsive in Blogger?

So, today we are here with another blogger widget for our loyal readers. In today's post we are going to share 3 unique styles to make embedded videos responsive. Making videos responsive is very easy task but along with that, displaying those videos inside beautiful frames was little tedious. So we already mentioned that we are going to share 3 styles by using which you can make embedded videos responsive. Styles are given below.

Style 1] Normal Style without Using any Frame.
Style 2] Display Videos under Beautiful Responsive Frame Style Designed with Pure Css3
Style 3] Display Videos under Beautiful Image of Blank Laptop.

How To Make Embedded Videos Responsive?

As we have mentioned above in this article to make videos responsive in a blog is very easy task. Just follow below steps and add this feature your blogspot blog.
  • Go to Blogger >> Posts >> Click on HTML Tab and paste CSS and HTML Part inside Post HTML Editor.
  • Make sure to change Video URL from HTML Part with your Video Link.
  • Choose your ones from below styles and click on CSS Part button for CSS Code and HTML Part button for HTML Part.

Style 1] Normal Style without Using any Frame.


CSS Part | HTML Part


Style 2] Display Videos under Beautiful Responsive Frame Style Designed with Pure Css3.



CSS Part | HTML Part


Style 3] Display Videos under Beautiful Image of Blank Laptop.



CSS Part | HTML Part

Style1 CSS Part

<style>
    .video_outer_wrap {
        width: 100%;
        max-width: 560px;
        margin: 15px auto;
    }
    .video_wrap {
        position: relative;
        padding-bottom: 56%;
        padding-top: 0px;
        height: 0;
        background-color: #000 !important;
    }
    .video_wrap iframe,
    .video_wrap object,
    .video_wrap embed {
        position:absolute;
        top:0;
        width:100%;
        height:100%;
    }
    </style>

Style1 HTML Part

<div class="video_outer_wrap">
<div class="video_wrap bottomshadows">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/fRh_vgS2dFE" width="560"></iframe> </div>
</div>

Style2 CSS Part

<style>
#mbg_vdo_frame_wrap {
    width: 100%;
    max-width: 560px;
    margin: 30px auto;
}
.mbg_vdo_frame_wrap_inner {
    position: relative;
    padding-bottom: 53%;
    height: 0;
    background-color: #000 !important;
    border: 15px solid #8ff;
    border-radius:20px;
}
.mbg_vdo_frame_wrap_inner iframe,
.mbg_vdo_frame_wrap_inner object,
.mbg_vdo_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) {
.mbg_vdo_frame_wrap_inner {
    border: 7px solid #8ff !important;
}
.bottomshadows:before, .bottomshadows:after {
    bottom: 9px !important;
} }
</style>

Style2 HTML Part

<div id="mbg_vdo_frame_wrap">
<div class="mbg_vdo_frame_wrap_inner bottomshadows">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/fRh_vgS2dFE?rel=0&amp;theme=light&amp;hd=1&amp;showinfo=0" width="560"></iframe>
</div>
</div>

Style3 CSS Part

<style>
   #mbg-main-wrap {
        width: 100%;
        max-width: 650px;
        margin: 15px auto;
    }
    .mbg-vdo-wrap-pc {
    position: relative;
    padding-bottom: 43%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
    -webkit-border-image: url('https://4.bp.blogspot.com/-T3Znwvx93rg/V6OB0VBNXeI/AAAAAAAAE3Q/CRhFyV87Zo0JRZYijiMca5DtRF_Q36vwQCLcB/s1600/laptop.png') 50 308 112 310 stretch stretch;
    -moz-border-image: url('https://4.bp.blogspot.com/-T3Znwvx93rg/V6OB0VBNXeI/AAAAAAAAE3Q/CRhFyV87Zo0JRZYijiMca5DtRF_Q36vwQCLcB/s1600/laptop.png') 50 308 112 310 stretch stretch;
    -o-border-image: url('https://4.bp.blogspot.com/-T3Znwvx93rg/V6OB0VBNXeI/AAAAAAAAE3Q/CRhFyV87Zo0JRZYijiMca5DtRF_Q36vwQCLcB/s1600/laptop.png') 50 308 112 310 stretch stretch;
    border-image: url('https://4.bp.blogspot.com/-T3Znwvx93rg/V6OB0VBNXeI/AAAAAAAAE3Q/CRhFyV87Zo0JRZYijiMca5DtRF_Q36vwQCLcB/s1600/laptop.png') 50 308 112 310 stretch stretch;
    border-color: rgba(0, 0, 0, 0);
    border-width: 27px 76px 55px 76px;
    border-style: inset;
}
.mbg-vdo-wrap-pc iframe, .mbg-vdo-wrap-pc object, .mbg-vdo-wrap-pc embed {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
}
@media (max-width: 500px) {
.mbg-vdo-wrap-pc {
    border-width: 20px 62px 40px 62px;
}
@media all and (max-width: 400px) {
.mbg-vdo-wrap-pc {
    border: none !important;
}
}
</style>

Style3 HTML Part

<div id="mbg-main-wrap">
 <div class="mbg-vdo-wrap-pc">
<iframe width="560" height="315" src="https://www.youtube.com/embed/fRh_vgS2dFE?rel=0&amp;theme=dark&amp;controls=1&amp;showinfo=0&amp;autohide=0" frameborder="0" allowfullscreen=""></iframe>
 </div>
</div>
Note: You can also paste CSS code to blogger template skin so that you don't have to paste the CSS code every time in any of your blogger post. If you want to add the CSS Code to template then copy the CSS code of your choice and head over to Blogger Dashboard >> Template >> Edit HTML and paste the CSS code juat above of ]]></b:skin> tag inside your blogger template.

Note: You can get embed code of your YouTube video by clicking on the video. Just right click on the video and select get embed code and after that copy your embed code from the middle of the video screen.

Required Editing

1st:- There is no need to paste your youtube video embed code as it is so instead just replace the Video ID which highlighted in the Yellow Color above.
2nd:- For Vimeo Videos replace the whole code starting with <iframe> code.

Common Problem in Style 2

In Style 2 sometimes shadows are not appearing as shown in the live demo. Just add this little  CSS code to your blogger template skin or inside your blog post with along with above CSS code given below:-
.post-body {     position: relative;     z-index: 1;  }
That's it. You are done.

Conclusion:

So above guide is about How To Make Embedded Videos Responsive in Blogger Blog? We hope you guys like it. Please let us know your feedback via comments whether you liked it or not. If you are facing any kind of problem or we could not make things clear then please let us know. We will try our best to help you out. Wanna help me? Okay! You can help me by Share this post or connecting me on Social sites.
Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.