SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Embedding videos on responsive layout

    Hi,

    I am trying to embed a YouTube video on my responsive layout and I found the following tutorial:

    http://webdesignerwall.com/tutorials...lastic-videos/ - http://webdesignerwall.com/demo/elastic-videos/ (demo)

    It seems to be working fine except one small issue. When you narrow down the browser window and start the video, black bars will appear above and below the video as you can see in the following image:



    I use the same code given in the tutorial. Is it possible to get rid of the black bars?

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm by no means a CSS expert - but..

    You should be able to change the

    padding-bottom: 56.25%; /* 16/9 ratio */

    part to fit your aspect ratio. There is nothing here that detects the aspect ratio of the video though so you need to know it up front.

    Someone else can likely expand on this.
    Comcure does independent, off-site website backups just for the webmaster
    Full API. Daily Snapshots. Backup via FTP, FTP over TLS or SFTP.
    Storage Pods in USA, Europe and Asia to come. Backup to the closest one.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also check out this post
    Comcure does independent, off-site website backups just for the webmaster
    Full API. Daily Snapshots. Backup via FTP, FTP over TLS or SFTP.
    Storage Pods in USA, Europe and Asia to come. Backup to the closest one.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,101
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    @Nail Yener — which browser are you viewing this in? Does the problem happen for you on the webdesignerwall, or just on your site? If just on your site, can you post a link?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    @Nail Yener — which browser are you viewing this in? Does the problem happen for you on the webdesignerwall, or just on your site? If just on your site, can you post a link?
    The black bars are displayed on the demo link and on my page as well. I have the same code. I am viewing on Chrome and Firefox.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,101
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    That's odd—I don't get the black bars in either of those browsers.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depends on resolution I believe. (I don't get the black bars either)
    Comcure does independent, off-site website backups just for the webmaster
    Full API. Daily Snapshots. Backup via FTP, FTP over TLS or SFTP.
    Storage Pods in USA, Europe and Asia to come. Backup to the closest one.

  8. #8
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That's odd—I don't get the black bars in either of those browsers.
    Quote Originally Posted by snickn View Post
    Depends on resolution I believe. (I don't get the black bars either)
    Really? Interesting. Just to make sure we are doing the same thing, here is the steps that I follow:

    1. Open the demo link.
    2. Narrow down the browser window to about 20% width of the screen.
    3. Click play on the video.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •