Embed YouTube Video: Did 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 or Embed 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!