Results 1 to 3 of 3

Thread: Clip:rect failing

  1. #1
    Join Date
    Jan 2012
    Posts
    25
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Clip:rect failing

    Hello.

    Im using the "clip:rect" to put an space of an external website in my webpage:

    Code:
    <iframe id="proba" SCROLLING=NO
    width="660" height="450" src="http://www.tu.tv/videos/azumanga-daioh-01"></iframe>​​​​​​​​​​​​​​​
    
    <style type="text/css">
    #proba {
    position: absolute; clip:rect ( 900 628 1300 70 );
    }
    </style>​
    I am trying this code in jsfiddle.net and the clip:rect property only cuts the bottom and the right, but not the left or the upperside.

    ¿Why does it fails?

    Why do i use an iframe? -> I am iframing a stream service, clipping the video instead of copying the embed. The "http://www.tu.tv/videos/azumanga-daioh-01" is the name of the chapter, the number 01 changes by chapter, 02, 03 so i use excel and i save lots of hours but first i need to clip it well.

    Thanks.
    Last edited by Vaonline; 07-21-2012 at 06:22 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I've never been real clear on what clip does. I think you need a block level element (iframes are inline). Even if you set its display to block, iframes are tricky, and as I say, clip is too. There seem to be a number of ways you can write it, and then there's visualizing the spacial math involved.

    Anyways, this seems to work out fairly well:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #container {
    position: relative; overflow: hidden; width: 610px; height: 415px;
    }
    #proba {
    position: absolute; width: 610px; height: 700px; top: -285px; left: 0px; display: block; border-width: 0;
    }
    </style>
    </head>
    <body>
    <p>Some other content</p>
    <div id="container"><iframe id="proba" scrolling=no frameborder=0 src="http://www.tu.tv/videos/azumanga-daioh-01"></iframe></div>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2012
    Posts
    25
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much!!!
    If any problem ill edit this post!
    Last edited by Vaonline; 07-21-2012 at 10:22 PM.

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
  •