Quick Guide: How to Make Wider Custom Youtube Player

Presenting the video content on your blog or website is often not easy to manage. But tasks can become simpler and easier with short tags to your video iframes. Youtube iframes makes your videos available without using Adobe Flash Player. Enabling this method of video sharing makes your visitors stay even more on your website than any other site which requires Flash Plugin to get installed first. So, to make your youtube video iframes fixed according to the size of your page then, you need to add width and height tags with proper values for them; according to your page.

Guidelines


  1. Open youtube and play the video you want to add on your website. To get iframe code of that video click 'Share' button for embedding video. Copy the iframe code that appears.
  2. Paste the copied code for video sharing in your content section where you want that video to appear to visitors.
  3. See the iframe code; you'll find tags like 'width="VALUE"' and 'height="VALUE"' . The value item is a number in pixels that determines the height and width of iframe on page. 
  4. See this code example to look for width and height:- <iframe width="650" height="440" src="//www.youtube.com/embed/AE3SwWaUXxX" frameborder="0" allowfullscreen></iframe>
  5.  Simply, adjust the width and height values according to your page. Preview the video player in your browser before making that change permanent.

Tips on Making Custom Youtube Player Wider


  • To set the video player width according to screen size then, use 'width="96%"' instead of "width="560" in pixels. The percentage width is called as fluid width that changes with screen size while fixed value of width in pixels do not change according to screen size.
  • Do not forget to add "" quotes surrounding the width or height value. 
  • You can also set the height but do not set height in percentage as it may show you unwanted results.

0 responses :

Post a Comment