Embed YouTube Videos without the YouTube Logo

Remove the YouTube Logo from the Video Player

If you would like to remove the logo from the YouTube player before embedding it on to your website, all you need to do is make a minor edit to the default embed code that is provided by YouTube.

The default YouTube embed code for a video is something like:

&lt;iframe src="http://www.youtube.com/embed/-hX_rznqnM0" height="350"  width="575"></iframe>

If you would like to remove the YouTube branding and logo from the embedded player, add modestbranding=0 to the YouTube video URL as shown below:

&lt;iframe src="http://www.youtube.com/embed/-hX_rznqnM0?modestbranding=1" height="350"  width="575"></iframe>

The new “modestbranding” parameter for YouTube is supported for both Adobe Flash and IFRAME based embed codes that are HTML5 compatible.

reason why the video “YouTube” logo overlay appears is because the modestbranding option normally, by itself, still shows some branding – in the form of a small “YouTube” text overlay in the upper-right corner of the video, when you hover over it while the video’s paused. But since you explicitly asked for showinfo=0, we have no place to show the “YouTube” text overlay. So the alternative is to communicate that it’s a YouTube video player via the video overlay.

Thanks for landing on this post, If you like my post then give your opinion and feedback in comment box.


TAGS:- #Embed YouTube Videos without the YouTube Logo, #embed youtube video without youtube logo, #remove youtube link from embedded video, #jwplayer remove youtube logo, #embed youtube video without the youtube, #YouTube Videos without the YouTube Logo, #remove youtube link from embedded video, #how to remove youtube logo from embedded videos & players, #youtube embed remove controls, #how to remove youtube logo from embedded video 2017, #remove youtube logo on hover, #remove youtube logo and title, #how to remove youtube logo from embedded video, #how to remove youtube logo from any youtube video, #How to remove YouTube Logo, #How to Embed YouTube Videos make without YouTube Logo, #YouTube Logo remover, #How to YouTube Logo remove from any video, #YouTube Logo removing tips, #YouTube Logo removing tricks

Read more »

An Online Viewer for Microsoft Project Files

While there are free viewers available for Word, Excel and PowerPoint, Microsoft does not provide an official viewer for Microsoft Project (.mpp) files. That means if you don’t have the Project program installed on your computer, you can’t read any of those project plans lying in your mailbox.

There’s however an excellent option now that will let you view and print Project files in the browser itself without requiring MS Project. It’s called projec.to.

OPEN MICROSOFT PROJECT FILES ONLINE

To open a project file without installing Microsoft Project, just sign-up for a free plan at projec.to and upload your .mpp (or .mpt template) file. The service will then render your project plan in a browser based Flash-viewer from where you can not only view the plan but also print it or even embed it in external web pages using Flash.

The service offers both free and paid plans but if you opt for the free option, any MS Project file (or Template) that you upload onto projec.to will be public by default.

You can of course delete files immediate after viewing them online but if your projects plans contain something extremely confidential, it may be a good idea to go with one of the paid plans that start at $5/month and allow private viewing.

Read more »

How to Insert YouTube Videos in PowerPoint

You can insert YouTube videos in your PowerPoint presentations in two ways. You can either “embed” the Flash video in the slide itself or you can link to the YouTube video from the slide that will auto-play when the presenter clicks on the video link.

Which approach should you follow? It depends on the venue of the conference. If they will have high-speed Internet (or Wi-Fi) at the venue, you can stream the YouTube video live from the Internet else you may download the YouTube video on to your computer and embed it as a local file into the relevant slide of your presentation.

EMBED YOUTUBE VIDEOS DIRECTLY INTO POWERPOINT

This is the recommended option if you are sure that the presentation venue will have good Internet connectivity.   Download and install the YouTube Wizard plug-in from here and it will add a new “Insert YouTube Video” command to your PowerPoint Toolbar.

You simply have to type the URL of the YouTube video and follow the wizard to embed the YouTube video player in your current PowerPoint slide. You can re-size and reposition the video player just like any other object on the slide.

PLAY YOUTUBE VIDEOS IN POWERPOINT WITHOUT INTERNET

The only problem with the above approach is that it streams live YouTube videos and thus an internet connection is required to playback the video during the slideshow. If you plan to deliver a presentation in a classroom where there will be no internet, take the following approach.

First download the YouTube video to your computer in either Windows Media or AVI format since PowerPoint doesn’t understand the default FLV or MP4 formats of YouTube. Once the video is saved as an AVI or WMV file, switch to PowerPoint and choose Insert – > Movie – > “Movie from file” to put the YouTube video into the current slide.

GET VIDEOS FROM GOOGLE DOCS INTO POWERPOINT

Now consider another possible case – you spent lot of effect preparing an elaborate presentation inside Google Docs with several YouTube clips but how do you import all this into PowerPoint.

While Google Docs does provide an “Export as PPT” option, the problem with this format is that it converts all embedded YouTube clips into static images which is something you don’t want. There’s however a simple workaround – just publish that Google Docs presentation as an HTML slideshow and then insert it like a web page in PowerPoint. Thus you can play YouTube clips inside PowerPoint even though they are part of your Google Docs presentation.

An advantage of this approach is that if you change any of the YouTube videos clip in your original Google Docs presentation, it will be reflected in the PowerPoint presentation as well.

Read more »

How to Embed Images & Logos in QR Codes

What is the first image that comes to your mind when you think of a QR Code? A confusing maze of black rectangular patterns arranged on a white background?

True, most QR Codes are available in black and white but they don’t have to be that way.

There’s an excellent online QR generator at qrhacker.com that lets you create colorful QR codes and what makes this tool different is that it provides you can option to embed photographs and logo images to your QR codes. You can even edit the colors of individual pixels that form the code.

To give you an example, here’s a QR code made using a picture of Zuckerberg and if you scan the code with an app on your phone, say Google Goggles, it should take you to Facebook. Every QR code has a unique URL for easy sharing or you can download the image locally in PNG or PDF.

Read more »

How to Embed YouTube Playlists in a Website

If you are planning to embed multiple YouTube videos on a web page, you may even consider putting all these videos into a single YouTube playlist and then embed the playlist into your page. This offers two advantages:

1. You can squeeze in more video content in the same amount of (visual) space.

2. A video playlist will reduce the (byte) size of your web page considerably because, technically, you now have to embed the YouTube Flash video player only once on your page.

HOW TO EMBED YOUTUBE VIDEO PLAYLISTS

The default embed code for any YouTube video playlist looks something like this (remember to replace the word “ID” with the actual YouTube playlist ID) :

 <object width="480" height="385"> 
 <param name="movie" value="http://www.youtube.com/p/ID"></param> 
 <param name="allowFullScreen" value="true"></param> 
 <param name="allowscriptaccess" value="always"></param>
 <embed src="http://www.youtube.com/p/ID" width="480" height="385" 
 type="application/x-shockwave-flash" allowscriptaccess="always" 
 allowfullscreen="true"></embed></object>

If you find the above code confusing, there a much simpler way as well.

YouTube offers an IFRAME option for embedding individual videos and the same code can be extended to embed video playlists as well.

<iframe src="http://www.youtube.com/embed/videoseries?list=ID" 
width="100%" height="500" frameborder="0"></iframe>

You may have to modify the value of height and width attributes to make the video player fit your page.

What’s the advantage? The code looks clean and, going forward, Google could make these playlists HTML5 ready. Then your existing video playlist will play on browsers that don’t have the Flash plugin without you having to change the embed code.

Read more »

How to Insert Images in your Google Spreadsheet Cells

While it has always been possible to add images to any sheet inside of your Google Spreadsheets, you can also insert images and icons inside individual spreadsheet cells as well.

To add an image to a cell, highlight the cell and click F2 to enter the formula mode and then type =image(“URL”) where URL is the public web address of that image. For instance, the following formula will insert a free image from Unsplash in your Google Spreadsheet.

=IMAGE("https://img.labnol.org/di/high-quality-photo.jpg")

Google Spreadsheets, by default, will scale the image to fit inside the area of the selected cell but you can easily change the default settings by adding another parameter to the image function.

For instance, a formula like =image(“URL”, 2) will stretch the image to fit inside the selected cell while =image(“URL”, 3) will insert the image into the cell at its original size.

You can also specify the existing height and width of the image in pixels by setting the mode to 4. The technique should be very handy for embedding social sharing icons in your spreadsheets.

=IMAGE("URL", 4, 300, 250)

If you are getting parsing errors, you are either using a non-existent image or you may have missing adding quotes around the image URL inside the image() formula.

Read more »

Better Ways to Embed Tables and Spreadsheets in Web Pages

Its easy to embed tabular data in  web pages. You can either use the standard <table> HTML tag or you can input the tabular data in a spreadsheet — like Excel Online or Google Spreadsheets — and embed the sheet in your web pages.

HTML tables are easy while spreadsheet based tables allow better formatting and complex layouts – like nested tables within a table – without fiddling with the code. Here are the different ways by which you can embed tables in your website and their pros and cons.


HOW TO CREATE AN HTML TABLE

If you have access to a WYSIWYG editor like Dreamweaver, you can easily create an HTML table using the built-in wizards but I prefer using Markdown for creating tables as it requires no tags. Go to gist.github.com (you don’t even need an account here) and enter the table  in the following format:

Column A | Column B
-------- | -------
Cell A1 | Cell B1
Cell A2 | Cell B2

Each column is separated by a pipe (|) while hyphens (-) indicate the table headings. Name the gist table.md (.md indicates markdown language) and click the “Create Secret Gist” button to render the markdown as a table.

Once you click the Save button, the gist will show you the visual table which you can copy-paste into any rich-text editor like the Gmail compose window. Alternatively, you can right-click the table on Github and choose Inspect Element to view the actual HTML tags for that table.

Tableizer is another simple tool for converting spreadsheet data into HTML table code. Create a table inside Excel or the Numbers app on your desktop, copy the cells and paste it inside Tableizer. It will generate the HTML code that can be used on your blog or website.


EMBED GOOGLE SHEETS IN YOUR WEBSITE

A popular option for embedding tabular data in a web page is through Google Docs (Spreadsheets). The advantage with this approach is that you can modify the data in the spreadsheet and embedded table will update itself to reflect the edits. There’s no need to edit the web page containing the table.

Go to spreadsheets.google.com, enter some data in the sheet and the choose the Publish to the Web option from the File menu. Choose Start Publishing and Google Drive will offer you the IFRAME embed code for that particular sheet.

The embedded sheet will preserve the original formatting of the cells but it will still be a static HTML document – there’s no option for sorting or filtering data in the HTML table.


EMBED EXCEL SHEETS IN WEB PAGES

Go to office.live.com and create new blank workbook. Enter the tabular data inside the Excel sheet and then choose File -> Share -> Embed -> Generate HTML.

Excel, unlike Google Docs, allows you to embed a select range of cells and not the entire spreadsheet. You can also include a download link in the embedded cells making it easier for your website visitor to download and open the table in their local spreadsheet app. The embedded spreadsheet also offers better copy-paste than Google Docs.


MAKE STATIC HTML TABLES INTERACTIVE

If you wish to go with static HTML tables, instead of interactive spreadsheet based tables, you can consider adding the Excel button that will make your HTML tables interactive.

You have the regular HTML code for your <table> and all you have to do is add another HTML tag to your web page that will turn the embedded static table into an interactive sheet.

<a href="#" name="MicrosoftExcelButton"></a>

<table>
  <thead><tr>
    <th>Column A</th>
    <th>Column B</th>
    </tr></thead>
  <tbody>
    <tr>
      <td>Cell A1</td>
      <td>Cell B1</td>
    </tr>
    <tr>
      <td>Cell A2</td>
      <td>Cell B2</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript" src="http://r.office.microsoft.com/r/rlidExcelButton?v=1&kip=1"></script>

This code will add a little Excel button next to your HTML table and when someone clicks that button, it creates a beautiful and interactive view of table with support for sorting and filtering. You can even visualize the HTML table as graphs without leaving the page.

This code will add a little Excel button next to your HTML table and when someone clicks that button, it creates a beautiful and interactive view of table with support for sorting and filtering. You can even visualize the HTML table as graphs without leaving the page.


HTML TABLES OR SPREADSHEETS?

The advantage with static HTML tables is that they are SEO friendly (search engines can read your HTML table) while spreadsheet based tables are not. The latter however allow better formatting options and are relatively easy to update.

If you wish to have the best of both worlds, go with an HTML table and use the Excel interactive view that will let viewers interact with the table on demand.

Read more »

Use Professional Photographs from Getty Images for Free

Getty is following the YouTube model. You can embed an image from their website using a line of code and the embedded images, in future, may carry advertising. It’s a win-win situation for both parties.

There are a couple of restrictions though. One, you cannot modify the size of images embedded through Getty Images. Getty says that you cannot use their images on commercial sites where the intent is to sell a product (if your blog has AdSense, it should not be an issue). Also, since these images are served inside an IFRAME, they will not be indexed by search engines.

WHICH GETTY IMAGES CAN I EMBED

Not all images on the Getty website are available for embedding on your website. When you perform a search, hover your mouse over the image thumbnail and look for the embed icon. If the icon is present, that image is embeddable and you can click the icon to get the actual embed code.

MAKING GETTY IMAGE EMBEDS RESPONSIVE

The embed code from Getty has a fixed height and width and it may thus break the layout of your website, especially on mobile devices. As a workaround, we can add a bit of responsiveness to the embed code (remember Google Maps) so that the embedded image will automatically fit the screen of the user.

All you have to do is take Getty’s HTML code and add it inside the .getty-images class in the snippet below. 

<style>
  .getty-images {
    position: relative;
    padding-bottom: 80%; 
    height: 0;
    overflow: hidden;
  }
  .getty-images iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }
</style>

<div class="getty-images">
  <!-- Getty Images Embed Code Goes Here -->
</div>

[*] The value of padding-bottom in line #4 is basically the aspect ratio of the image and you may have to modify this number based on the dimensions of the image provided by Getty.

Read more »

How to Embed Flipboard Magazines on your Website

If you have accessed the Digital Inspiration website recently from your desktop, you have have noticed a Flipboard magazine widget that’s now embedded on all article pages – you can see one here. This magazine offers an alternative, more visual way for visitors to browse the site’s archives and the response so far has been quite good.

Any Flipboard magazine  can be easily embedded using the standard IFRAME tags on a web page but there are a few things that you should consider:

1. The magazine widget is only displayed on desktop computers since the magazine layout isn’t optimized for mobile phones yet.

2. The widget is heavy and therefore should be added asynchronously to a web page so that it doesn’t block other elements of the page from loading in the browser.

Here’s how you can embed the Flipboard magazine that will take care of both the above requirements.

Step 1 – Insert this <div> anywhere in your web template where you would like the Flipboard magazine to appear.

<div id="flipboard"></div>

Step 2 – Insert this JavaScript snippet near the closing </body> tag of your website. It will load asynchronously and thus can be placed at the bottom of your page.

<script>
  (function () {
    var width = 0,
        flipboard = document.getElementById('flipboard');
    width = flipboard.getBoundingClientRect().width ? flipboard.getBoundingClientRect().width : flipboard.offsetWidth;
    if (width > 800) {
      flipboard.innerHTML = '<iframe width="100%" frameborder="0" height="600px" marginheight="0" marginwidth="0" scrolling="no" src="https://flipboard.com/section/tech-tips-bnjaT5"></iframe>'
    }
  })();
</script>

*Remember to replace the Flipboard magazine URL with your own.

Internally, the JavaScript calculates the width of the visitor’s browser, similar to what we did for responsive AdSense ads, and if the size is greater than 800px, the IFRAME is added to the DIV. Simple!

Read more »

How to Embed Facebook Videos in your Web Pages

Facebook, like YouTube, now allows to you easily embed videos on web pages outside Facebook. That means if you come across an interesting video on Facebook, you can easily put it on your blog without having to direct your audience to the Facebook website.

There are two important points to consider though. One, you should only embed videos that are public. Facebook does provide the embed code for private videos that are shared with you or your network but your audience won’t be able to play these videos on your website.

The other issue is that Facebook still uses the Adobe Flash player to embed videos when your website is viewed on a desktop. It automatically switches to the HTML5 format on mobile devices but if someone is viewing your website from a desktop or laptop, they would need the Shockwave Flash plugin enabled to view your embedded videos.

Add Facebook Videos to your Website

First, let’s find a video on Facebook using Graph Search. Go to the search box and type a search query like videos of cats liked by my friends or videos uploaded by me or videos uploaded by my friends of friends.

Next click the video thumbnail to open the video play in a lightbox window. Hover your mouse over Options and choose Embed Video from the drop-down. Facebook will provide a snippet of code that you can directly copy and paste in your website template or your blog post.

Please note that you need to be logged in to your Facebook account for generating the embed code.

The embedded videos are responsive and occupy the full width of the parent div. If you would like to constraint the video width or need to wrap text around the video, you’ll need to modify the .fb-video class as show in the snippet below:

<style>
  .fb-video { 
    
    /* Do not occupy the full width*/
    max-width: 300px !important; 
    
    /* Align the video to the right of a page and wrap the text */
    float: right;
    
    /* Add a Grey border to the video */
    border: 2px solid grey;
    
  }
</style>

Read more »

How to Customize the Facebook Page Plugin for Websites - Way2trick

What you see here are a list of customization options now available inside the Facebook Page plugin. You can choose to have a simple Like box with just your logo and like button or you can have a complete box with cover photos as well.

 

Customizing this Facebook Page plugin is simple as detailed in the official documentation. For instance, if you would not like to show a cover photo, set the HTML5 data attribute data-hide-cover to false in the DIV tag. Setting data-show-facepile to false will hide the row of pictures.

Similarly, you can attach styles to the .fb-page class to customize the outer of the Facebook Plugin.  

<div class="fb-page" 
     data-href="https://www.facebook.com/way2trick1"  
     data-small-header="false"  
     data-hide-cover="false"    
     data-show-facepile="true"  
     data-show-posts="false">
</div>

<div id="fb-root"></div>

<style>

  .fb-page, .fb-page:before, .fb-page:after {
    border: 1px solid #ccc;
  }

  .fb-page:before, .fb-page:after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 2px;
    right: 2px;
    height: 1px;
    border-top: none
  }
  
  .fb-page:after {
    left: 4px;
    right: 4px;
    bottom: -5px;
    box-shadow: 0 0 2px #ccc
  }
</style>

<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

Other Posts That May Interest You..

1. Find LinkedIn Profiles with Google Search 

2. How to Receive Files in your Google Drive from Anyone 

3. How to Save your Gmail to Google Drive Automatically

4. Hindi Speech Recognition Software with Spell Checker

Read more »