How to Embed YouTube Video in Your Responsive Blog or Website

Learn the way to make your YouTube and Vimeo videos responsive for your blogs or websites so that it can adapts all visitors’ devices like mobiles, iPads, laptops and computers.

Responsive-YouTube-VideoDid you know? YouTube was founded in February, 2005 and now there are billions of peoples upload, watch and share originally-created videos worldwide. Recently, there is a craze of creating a Responsive Blog or Website so that visitors may enjoy the respective site and blog from their all devices ranging from small size mobiles to large size computers and TVs.

However, YouTube only provides fixed size codes to embed YouTube videos. The default size is 560px width and 315px height and you may change the size of YouTube videos with the help of custom size option under video size drop down option.

But, the custom size is not the solution to embed YouTube videos in your responsive webpage. It does not change the size according to your website visitor’s device widths and heights.

Therefore, you should have to use some tricks that can make your YouTube videos responsive. I am providing a simple CSS and HTML codes to embed YouTube and Vimeo videos in your responsive blogs and websites.

SWT Video Box is designed in such a way so that your YouTube video will not only become responsive but it also has a custom thumbnail image and a Play Button at the center of video. You may change the custom thumbnail for each new video you embed in blog post or webpage.

Make your YouTube Video Responsive

Setp-1:

First of all place these CSS codes into your blogs or websites just before ]]></b:skin>:

.swt-video-box {/* SWT Video Box by Showeblogin */
width:100%;
cursor:hand;
height:315px;
cursor:pointer;
position:relative;
overflow:hidden;
max-width:100%;
padding-top:25px;
padding-bottom:25px;
background-color:#000;}
.swt-video-box .swt-video-thumb{
top:0;
left:0;
right:0;
bottom:0;
opacity:.8;
margin:auto;
display:block;
max-width:100%;
position:absolute;
width:100% !important;
height:100% !important;
filter:alpha(opacity=80);}
.swt-video-box .swt-video-play{
top:50%;
left:50%;
opacity:.89;
width:125px;
height:125px;
margin-top:-56px;
margin-left:-69px;
position: absolute;
filter:alpha(opacity=89);
background:url("http://img.superwebtricks.com/files/video-play-icon.png") no-repeat
/* SWT Video Box Tutorial at http://www.superwebtricks.com/?p=439 */}

Step-2:

Now, insert this Java Scripts into your blogs or websites. For Blogger just go to Layout and add a Gadget (HTML/JavaScxript).

<!-- SWT Video Box START--><script type='text/javascript'>/*<![CDATA[*/
var _0x2471=["\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x79\x6F\x75\x74\x75\x62\x65\x2E\x63\x6F\x6D\x2F\x65\x6D\x62\x65\x64\x2F","\x69\x64","\x64\x61\x74\x61","\x3F\x61\x75\x74\x6F\x70\x6C\x61\x79\x3D\x31\x26\x61\x75\x74\x6F\x68\x69\x64\x65\x3D\x31\x26\x62\x6F\x72\x64\x65\x72\x3D\x30\x26\x77\x6D\x6F\x64\x65\x3D\x6F\x70\x61\x71\x75\x65\x26\x65\x6E\x61\x62\x6C\x65\x6A\x73\x61\x70\x69\x3D\x31\x26\x72\x65\x6C\x3D\x30","\x3C\x69\x66\x72\x61\x6D\x65\x20\x73\x72\x63\x3D\x22","\x22\x20\x66\x72\x61\x6D\x65\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x61\x6C\x6C\x6F\x77\x66\x75\x6C\x6C\x73\x63\x72\x65\x65\x6E\x22\x20\x77\x69\x64\x74\x68\x3D\x22","\x77\x69\x64\x74\x68","\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22","\x68\x65\x69\x67\x68\x74","\x22\x3E\x3C\x2F\x69\x66\x72\x61\x6D\x65\x3E","\x68\x74\x6D\x6C","\x63\x6C\x69\x63\x6B","\x2E\x73\x77\x74\x2D\x76\x69\x64\x65\x6F\x2D\x62\x6F\x78"];jQuery(_0x2471[12])[_0x2471[11]](function (){var _0x8ba2x1=_0x2471[0]+jQuery(this)[_0x2471[2]](_0x2471[1])+_0x2471[3];var _0x8ba2x2=_0x2471[4]+_0x8ba2x1+_0x2471[5]+jQuery(this)[_0x2471[6]]()+_0x2471[7]+jQuery(this)[_0x2471[8]]()+_0x2471[9];jQuery(this)[_0x2471[10]](_0x8ba2x2);}
);/*]]>*/</script><!-- SWT Video Box END-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

NOTE: Delete the last line (Fourth) if you had already added jQuery in your template.

Step-3:

Finally, you have to copy and paste these Codes into your blog or website where you want to embed YouTube video.

Step-4:

<!-- SWT Video Box by Showeblogin -->
<div class="swt-video-box" data-id="Replace with YouTube video ID">
<a href="https://www.youtube.com/watch?v=Replace with YouTube video ID">
<img class="swt-video-thumb" src="Replace with your own custom thumb image URL"/><!--
SWT Video Box by www.superwebtricks.com --></a>
<div class="swt-video-play"></div></div>

Enjoy!

Shortlink: http://www.superwebtricks.com/?p=439 Free Technical Help
If you don't want to miss our daily tutorials then you may Subscribe to Showeblogin via Email | Facebook | Twitter | and Google Plus
Home»Blogging»Blogger Blog»Tips and Tricks»How to Embed YouTube Video in Your Responsive Blog or Website
Top