1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Possible to have "encroaching" border around a youtube vid?

Discussion in 'HTML & JavaScript' started by halifax123, Dec 9, 2010.

  1. halifax123

    halifax123 Power Member

    Joined:
    Aug 5, 2008
    Messages:
    594
    Likes Received:
    66
    Location:
    uranus
    Hey Bhtr's!

    I want to use a video I located on youtube, unfortunately it has the
    contact domain of the poster on the vid. He placed his contact info
    on a large black border he created around the vid, likely I assume with a
    camtasia overlay

    Can I place a border that encroaches on the vid that will "hide" the info, and
    cover his huge "border" with some type of coding?

    It's actually a video from homestead or intuit dot com
    main page, I see it uses more(source code) than just a url to tie in, and far
    too complex for someone like me (novice) to recreate or host
    on my site, even if I could....

    The youtube version is perfect! the only problem is the poster placed
    his contact info within the video itself


    Is there any way to place a border around the vid that can be made smaller
    than the width height of the video and therefore "block" the posters contact
    info?

    (I know I can place a border at the point of "embed" on youtube, but it
    frames the entire vid, which won't work to hide the contact info..... I'm
    using a wordpress blog for my site)

    Thank you very much

    Hali~!:)
     
    Last edited: Dec 9, 2010
  2. imperial109

    imperial109 Regular Member

    Joined:
    Jan 19, 2009
    Messages:
    499
    Likes Received:
    361
    Get some sort of plugin that allows code to be placed in the post.
    You can cover up the contact info with a static overlay using CSS. Insert an image at the correct coordinates.
    You could also just download it, and edit it in Windows Movie Maker if you have it and just place the pipe symbol over the contact info. |
    Make it bold, large font, and select a font style that will make it look like one large bar.
     
    • Thanks Thanks x 1
  3. halifax123

    halifax123 Power Member

    Joined:
    Aug 5, 2008
    Messages:
    594
    Likes Received:
    66
    Location:
    uranus
    thanks imperial,

    problem is I'm not that techie advanced? the static css overlay is
    probably more up my alley, just don't know the coding?


    is there a code somewhere that I can copy?

    I did some searches but not knowing the precise jargon I wasn't successful

    Hali!~
     
    Last edited: Dec 10, 2010
  4. imperial109

    imperial109 Regular Member

    Joined:
    Jan 19, 2009
    Messages:
    499
    Likes Received:
    361
    Play around with left:40px; and top:0px. Just change the numbers to find the location on your site.
    Also change the img src="" to your image in the body.
    Specify the width and height to make it load faster as well.

    HTML:
    <head>
    <style type="text/css">
    #overlay
    {
    position:absolute;
    left:40px;
    top:0px;
    z-index:1;
    }
    </style>
    </head>
    
    <body>
    <h1>Smiley</h1>
    <img id="overlay" src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" width="32" height="32" />
    <p>Left = x axis; Top = y axis</p>
    </body>
     
    • Thanks Thanks x 1
  5. halifax123

    halifax123 Power Member

    Joined:
    Aug 5, 2008
    Messages:
    594
    Likes Received:
    66
    Location:
    uranus
    thanks ya again mster imperial!

    I will give her a spin and report back with my results!
    I'm eager to see how it works out....

     
  6. halifax123

    halifax123 Power Member

    Joined:
    Aug 5, 2008
    Messages:
    594
    Likes Received:
    66
    Location:
    uranus
    hey imperial if this is my youtube script

    <object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/M0H5KRcpDZU?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/M0H5KRcpDZU?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

    can I ask in what way I implement the code you've given me?

    I'm sorry to be such a dimwit, but I'm thrown on this point

    hali~!
     
  7. Monrox

    Monrox Power Member

    Joined:
    Apr 9, 2010
    Messages:
    615
    Likes Received:
    579
    Or download the vid, crop it and reupload it. Make it private so the owner won't locate it and tell on yous.
     
  8. halifax123

    halifax123 Power Member

    Joined:
    Aug 5, 2008
    Messages:
    594
    Likes Received:
    66
    Location:
    uranus
    Thanks for your help effort monrox!

    But I'm actually farrrr dummer than you give me credit for!

    the whole "download and croping it" although I can easily do that
    to a pic of about any kind using paint or something else, when it comes to "vids" I'm a fish out of water

     
  9. imperial109

    imperial109 Regular Member

    Joined:
    Jan 19, 2009
    Messages:
    499
    Likes Received:
    361
    Code:
    <style type="text/css">
    #overlay
    {
    position:absolute;
    left:40px;
    top:0px;
    z-index:1;
    }
    </style>
    
    <img id="overlay" src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" width="32" height="32" />
    
    [COLOR=DarkOrange]<object width="480"  height="385"><param name="movie"  value="http://www.youtube.com/v/M0H5KRcpDZU?fs=1&hl=en_US"></param><param  name="allowFullScreen" value="true"></param><param  name="allowscriptaccess" value="always"></param><embed  src="http://www.youtube.com/v/M0H5KRcpDZU?fs=1&hl=en_US"  type="application/x-shockwave-flash" allowscriptaccess="always"  allowfullscreen="true" width="480"  height="385"></embed></object>[/COLOR]
    
    
    Add this to your post and tweak the details like I mentioned earlier. Make sure that the HTML tab is clicked when adding the post. Otherwise, it will just print the code.
     
    • Thanks Thanks x 1
  10. halifax123

    halifax123 Power Member

    Joined:
    Aug 5, 2008
    Messages:
    594
    Likes Received:
    66
    Location:
    uranus
    I entered the code in the post just like you displayed down below..

    I did try different values in the "top & left" pixel values...
    the video shows up, but no border at all? (it's in html mode)

    (I'm sorry to be such a dork! I really am!)


     
    Last edited: Dec 10, 2010
  11. imperial109

    imperial109 Regular Member

    Joined:
    Jan 19, 2009
    Messages:
    499
    Likes Received:
    361
    It's not a border, rather, an image. Place it over the contact information on the video. Right now it's set to display a smiley face from
    Code:
    hxxp://img.brothersoft  com/icon/softimage/s/smiley.s_challenge-131939.jpeg
    You can PM me the URL where you added the code and I can help you further if you wish.
     
    • Thanks Thanks x 1
  12. halifax123

    halifax123 Power Member

    Joined:
    Aug 5, 2008
    Messages:
    594
    Likes Received:
    66
    Location:
    uranus
    Thanks imperial,

    will the border I use as an image and
    it's location, stay in the same place if someone has differing
    sizes of screens on their pc?

    I thought about that because once I was trying to put together a
    site and depending upon if I was placing things (I think if I recall
    correctly) "fixed" or "floating" they the site would adjust, but if I used
    (I think)"fixed" and someone had a different sized screen, things would
    move all over the place, so I think "floating" or "dynamic" is what had
    to be used for orientation,....

    anyhow I thought about that, even though this is just a post on my site

    but can that come into play in this situation?

    Hali~!
    (PS thanks Imperial! I did get it to work (still have the "fixed" floating" orientation question)
    but it's not "on top" it's behind the video, any idea what I can do to get it
    to the "front"?
     
    Last edited: Dec 10, 2010
  13. halifax123

    halifax123 Power Member

    Joined:
    Aug 5, 2008
    Messages:
    594
    Likes Received:
    66
    Location:
    uranus
    hey imperial,

    just don't see a need for a pm...thanks though
    I'm still learning and trying to figure it out

    seems as though it may be a "div" issue, or lack there of

    so I'll still try to figure it out, but if anyone knows the answer
    please chime in!

    Hali~!
     
  14. imperial109

    imperial109 Regular Member

    Joined:
    Jan 19, 2009
    Messages:
    499
    Likes Received:
    361
    Make another css id that just has the z-index attribute and set it to -1
    Then insert it into the object tags.

    Code:
    #behind
    {
    z-index:1;
    }
    <object id="behind">...</object>
    I'm not sure if you need to add the other attributes, but play around with it.
     
    • Thanks Thanks x 1
  15. halifax123

    halifax123 Power Member

    Joined:
    Aug 5, 2008
    Messages:
    594
    Likes Received:
    66
    Location:
    uranus
    thanks imperial!

    this is how I interpreted your code instruct
    it still places the image "behind" instead of infront

    and I change the value of z-index: -1; from 0,
    to 1, to 2 to different things but it doesn't seem
    to change the orientation?

    any ideas?


    <style type="text/css">
    #overlay
    {
    position:absolute;
    left:50px;
    top:600px;
    z-index: 1;
    }

    #behind
    {
    z-index: -1;
    }
    </style>

    <img id="overlay" src="http://mysite/wp-content/uploads/2010/12/black-line.bmp" width="480" height="65" />


    <object id="behind" width="480" height="385"><param name="movie" value="http://www.youtube-nocookie.com/v/M0H5KRcpDZU?fs=1&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/M0H5KRcpDZU?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385" ></embed></object>
     
  16. halifax123

    halifax123 Power Member

    Joined:
    Aug 5, 2008
    Messages:
    594
    Likes Received:
    66
    Location:
    uranus
    any ideas anyone?
     
  17. imperial109

    imperial109 Regular Member

    Joined:
    Jan 19, 2009
    Messages:
    499
    Likes Received:
    361
    Code:
    <style type="text/css">
    #overlay
    {
    position:absolute;
    left:50px;
    top:100px;
    z-index: 1;
    }
    </style>
    
    <img id="overlay" src="http://www.adiumxtras.com/images/thumbs/smiley_menu_bar_11_15109_5592_thumb.png" width="50" height="50" />
    
    <object width="480" height="385">
    <param name="movie" value="http://www.youtube-nocookie.com/v/M0H5KRcpDZU?fs=1&hl=en_US&rel=0"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube-nocookie.com/v/M0H5KRcpDZU?fs=1&hl=en_US&rel=0" 
    type="application/x-shockwave-flash" 
    allowscriptaccess="always" 
    allowfullscreen="true" 
    width="480" 
    height="385"
    [COLOR=Red][B]wmode="opaque"[/B][/COLOR]
     ></embed></object>
    It turns out object oriented coding is a bit different. Just a simple wmode was needed inside of the embed tags.

    Cheers ^^
     
    • Thanks Thanks x 1
  18. halifax123

    halifax123 Power Member

    Joined:
    Aug 5, 2008
    Messages:
    594
    Likes Received:
    66
    Location:
    uranus
    Thank you very very very very very very much imperiaL! :cheer2:

    you have solved a stopgap for me that I could not get past and couldn't really proceed, So I thank you much, I really appreciate it!:You_Rock_

    I had spent about an hour and a half searching online and trying a lot of different things
    I do recall seeing someone on some site showing "opague" within their
    posted script, but didn't know if that was "the fix" or if it was
    where to insert it, so I just kept trying everything!

     
    Last edited: Dec 13, 2010
  19. halifax123

    halifax123 Power Member

    Joined:
    Aug 5, 2008
    Messages:
    594
    Likes Received:
    66
    Location:
    uranus
    by the way imperial

    you've already done more than enough
    but just in case there is a simple and easy answer,
    do you know how I can also have a border placed
    on the top area of the video?

    2 borders in a sense?

    I made a second "border image"

    and I created a second "overlay1" but it doesn't display them
    properly, it does show the 2 different borders but it also "shoves"
    the video down maybe a hundred pixs or so, and of course that misaligns things, if you happen to know imperial? if not I'm more than happy with
    the help you've given me


    <style type="text/css">
    #overlay
    {
    position:absolute;
    left:44px;
    top:730px;
    z-index: 1;
    }

    #overlay1
    {
    position:absolute;
    left:44px;
    top:600px;
    z-index: 1;
    }


    #behind
    {
    z-index: 50;
    }
    </style>

    <img id="overlay" src="http://mywebsite.info/wp-content/uploads/2010/12/black-line.bmp" width="480" height="65" />

    <img id="overlay1" src="http://mywebsite.info/wp-content/uploads/2010/12/black-line2.bmp" width="480" height="65" />





    <object id="behind" width="480" height="385"><param name="movie" value="http://www.youtube-nocookie.com/v/M0H5KRcpDZU?fs=1&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/M0H5KRcpDZU?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385" wmode="opaque"
    ></embed></object>



    hali~!
     
  20. heiska

    heiska Junior Member

    Joined:
    Dec 5, 2008
    Messages:
    138
    Likes Received:
    169
    Change this:
    Code:
    #behind
    {
    z-index: 50;
    }
    to this
    Code:
    #behind
    {
    z-index: -1;
    }
    Because of this: