hello guys today i will share you web design code hope you like this 

 

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Youtube thumbnail</title>  
   <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
 </head>  
 <body>  
 <div class="container-fluid">   
   <h1 class="text-center text-white">FreeDownloderYt</h1>  
 </div>  
 <div class="container">  
      <p><br /></p>  
 <div style="display: block; margin: 0px auto; text-align: center;">  
 </div>  
 <div class="post-body entry-content" id="post-body-5188682288799220395">  
 <div><p></p><div dir="ltr" style="text-align: left;" trbidi="on">  
 <div style="font-size: 0pt; line-height: 0px;">Get YouTube Video Thumbnail Image, get youtube thumbnail, get thumbnail youtube, youtube thumbnail url,img.youtube.com big image, get thumbnail from youtube, youtube thumbnail url, youtube image url, get youtube thumbnail, google photos rss, get thumbnail youtube, youtube thumbnail generator, thumbnail youtube generator, thumbnail generator youtube, youtubethumbnailgenerator, youtube video thumbnail generator, youtube thumbnail generator, youtube thumbnail maker, youtube screenshot generator,thumbnail maker, youtube video thumbnail generator, youtube thumbnail maker, youtube thumbnail creator,  
 thumbnail creator, youtube thumbnail generator, custom thumbnail maker, thumbnail generator, what is a thumbnail, thumbnail maker, make a thumbnail, thumbnail creator, youtube thumbnail editor, thumbnail generator, youtube thumbnail generator, video thumbnail maker, make a thumbnail, youtube thumbnail template, thumbnail youtube, how to make your own thumbnails for youtub  
 <span style="color: red; font-size: x-large; font-weight: bold;">  
      <p class="text-center">Enter YouTube URL below</p>  
 </span>  
 </div>  
 <div class="row">  
      <div class="col-md-12">  
           <div style="text-align: left;">  
                <div class="panel panel-primary">  
                     <div class="panel-body">  
                          <div class="form-group" style="font-weight: bold;">  
                               <span style="color: red;">   
                                    <span style="font-size: x-small;">  
                               </span>  
                               <br />  
                          </span>  
                          <label class="control-label">  
                               <span style="color: red; font-size: x-large;">       
                               </span>  
                          </label>  
                          <div class="input-group">  
               <input class="searchbar form-control" id="yt" placeholder="https: //www.youtube.com/watch?v=3nmnMtbzzjE;" style="width: 450px;" type="text" value="" /></div><div class="input-group"><span style="font-size: x-small;"> </span></div><div class="input-group"><span class="input-group-btn"><button class="btn btn-primary btn-lg" id="videoButton" onclick="GETIMAGES();" type="button">Get YouTube Thumbnail</button>  
               </span>  
             </div>  
           </div>  
           <div id="Showdata" style="display: none;">  
             Video Thumbnail : Four Small Thumbnails (120x90) <br />  
             <img alt="Small Thumbnail" id="bdea" src="" title="Small Thumbnail" />  
             <img alt="Small Thumbnail" id="b2" src="" title="Small Thumbnail" />  
             <img alt="Small Thumbnail" id="b3" src="" title="Small Thumbnail" />  
             <img alt="Small Thumbnail" id="b4" src="" title="Small Thumbnail" /><br />  
             <p>[ <a download="default.jpg" href="#" id="a1">Download</a> ] / [ Right click Save Image as ] / [ Copy the url ]  
               <input class="form-control input-sm" id="s1" onclick="this.select()" readonly="readonly" type="text" />  
             </p>  
             <hr />  
             Video Thumbnail : Medium Quality (320x180) <br />  
             <img alt="Medium Quality" id="b6" src="" title="Medium Quality" /><br />  
             <p>[ <a download="mqdefault.jpg" href="#" id="a6">Download</a> ] / [ Right click Save Image as ] / [ Copy the url ]  
               <input class="form-control input-sm" id="s6" onclick="this.select()" readonly="readonly" type="text" /></p>  
             <hr />  
             Video Thumbnail : High Quality (480x360) <br />  
             <img alt="High Quality" id="b5" src="" title="High Quality" /><br />  
             <p>[ <a download="hqdefault.jpg" href="#" id="a5">Download</a> ] / [ Right click Save Image as ] / [ Copy the url ]  
               <input class="form-control input-sm" id="s5" onclick="this.select()" readonly="readonly" type="text" /></p>  
             <hr />  
             Video Thumbnail : High Resolution / Definition (1280x720) <br />  
             <img alt="High Resolution" id="b7" src="" title="High Resolution" />  
             <p>[ <a download="maxresdefault.jpg" href="#" id="a7">Download</a> ] / [ Right click Save Image as ] / [ Copy the url ]  
             <input class="form-control input-sm" id="s7" onclick="this.select()" readonly="readonly" type="text" /></p>  
           </div>  
           <div id="iHelp">  
             <br />  
             <h2 class="text-primary head text-center" style="font-weight: bold;">  How to use YouTube Thumbnail Image Downloader</h2>  
             <p class="text-center" style="font-weight: bold;">Step 1 : Go to www.YouTube.com, Search a video.</p>  
             <p class="text-center" style="font-weight: bold;">Step 2 : Copy the URL of the video (Example: https://www.youtube.com/watch?v=3nmnMtbzzjE ).</p>  
             <p class="text-center" style="font-weight: bold;">Step 3 : Paste that URL in the box given above and then click the "Get YouTube Thumbnail" button.</p>  
             <p class="text-center" style="font-weight: bold;">Step 4 : Choose your Thumbnail size and Download it.</p>  
           </div>  
         </div>  
       </div>  
     </div>  
     <script type="text/javascript">  
       function saveImageAsJpg(name, adress) {  
         var background = new Image();  
         background.src = "http://i.imgur.com/yf6d9SX.jpg";  
         // alert(name);  
         var c = document.getElementById("myCanvas");  
         alert(c);  
         var ctx = c.getContext("2d");  
         alert(ctx);  
         background.onload = function () {  
           ctx.drawImage(background, 0, 0);  
         }  
         var a = document.createElement('a');  
         // var img = document.getElementById("a7"); onclick="saveImageAsJpg('test', 'http://img.youtube.com/vi/ZGycniztgi4/mqdefault.jpg')"  
         // alert(img);  
         // ctx.drawImage(img, 10, 10);  
         a.href = document.getElementById("myCanvas").toDataURL();  
         a.download = "wrwrwer";  
         // alert(c.toDataURL());  
        //   alert(adress);  
         var a = document.createElement('a');  
         a.href = "http://img.youtube.com/vi/ZGycniztgi4/mqdefault.jpg";  
         a.download = "mqdefault.png";  
       //  a.setAttribute('href', 'data:image/jpg;charset=utf-8,' + ("http://img.youtube.com/vi/ZGycniztgi4/mqdefault.jpg"))  
       //  a.setAttribute('download', filename);  
         document.body.appendChild(a);  
         a.click();  
         document.body.removeChild(a);  
       }  
       function GETIMAGES() {  
         url = document.getElementById('yt').value;  
         if (url.trim() == '') {  
           alert('Please enter youtube video url');  
           return false;  
         }  
         var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;  
         var match = url.match(regExp);  
         if (match && match[7].length == 11) {  
           document.getElementById('Showdata').style.display = "block";  
           bdea.src = 'http://img.youtube.com/vi/' + match[7] + '/default.jpg';  
           b2.src = 'http://img.youtube.com/vi/' + match[7] + '/1.jpg';  
           b3.src = 'http://img.youtube.com/vi/' + match[7] + '/2.jpg';  
           b4.src = 'http://img.youtube.com/vi/' + match[7] + '/3.jpg';  
           b5.src = 'http://img.youtube.com/vi/' + match[7] + '/hqdefault.jpg';  
           b6.src = 'http://img.youtube.com/vi/' + match[7] + '/mqdefault.jpg';  
           b7.src = 'http://img.youtube.com/vi/' + match[7] + '/maxresdefault.jpg';  
           a5.href = 'http://img.youtube.com/vi/' + match[7] + '/hqdefault.jpg';  
           a6.href = 'http://img.youtube.com/vi/' + match[7] + '/mqdefault.jpg';  
           a7.href = 'http://img.youtube.com/vi/' + match[7] + '/maxresdefault.jpg';  
           a1.href = 'http://img.youtube.com/vi/' + match[7] + '/default.jpg';  
           document.getElementById("s1").value = document.getElementById('a1').href;  
           document.getElementById("s6").value = document.getElementById('a6').href;  
           document.getElementById("s5").value = document.getElementById('a5').href;  
           document.getElementById("s7").value = document.getElementById('a7').href;  
         }  
         else {  
           document.getElementById('Showdata').style.display = "none";  
           alert('No YouTube video image found this url, Please try again...');  
           return false;  
         }  
       }  
     </script>  
   </div>  
 </div>  
 </div>  
 <p></p></div>  
 <div class="clear"></div>  
 </div>  
 <div class="post-footer">  
 <div class="post-footer-line post-footer-line-1">  
 <div style="display: block; margin: 0px auto; text-align: center;">  
 </div>  
 <span class="bottomshare">  
   <div class="text-center">  
 <script type="text/javascript">  
 //<![CDATA[  
 var siteurl = window.location.href;  
  document.write('<div class="sharesimp"><div class="sharede"> \  
 <a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\  
   <i class="fa fa-google-plus gotea"></i> Google</a> \  
 <a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\  
   <i class="fa fa-facebook fbtea"></i> Facebook</a> \  
 <a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\  
   <i class="fa fa-twitter twtea"></i> Twitter</a> \  
 </div><div class="clear"></div></div> \  
 ');  
 //]]></script></span></div></div>  
 </div>  
 </div> 
 </body>  
 </html>  

This is a tool for blogger hope you will like this code


No comments:

Post a comment