Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Problems with creating a border around posted videos.

    I am trying to add a border around videos in my main posts within the wowstead.com blogging platform, but it is creating spaces in between the images.

    In the normal browser view it looks perfect, but when I add it to a post it does not work. I believe there is something altering the code as I put it in. I've attempted three different methods (two of which I will post. And one of them is table based and seems to be working partially. (I know I shouldn't be using tables as it is way outdated, but at this point I will settle for anything that works)

    I am hoping to have this issue resolved before Mists of Pandaria is Released so we can update the site in its entirety for a uniform look.

    Thanks to anyone for their help. Will keep an eye on the post.

    Here is the link to the post, it is the very first one http://www.impolitesocialites.com/

    Here are the two examples of the code im using:

    Example 1 (Blogging Platform auto adds Paragrah tags to the beginning and end automatically to my code here, though I'm not sure if that messes with anything. Don't think it should.)

    Code:
    <div style="padding:20px; margin:auto; width:640px; height:385px; background-image:url('http://i45.tinypic.com/5bnucg.jpg');">
    <object width="640" height="385" data="http://www.youtube.com/v/wvYXoyxLv64&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash">
    <param name="allowfullscreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="wmode" value="opaque" />
    <param name="src" value="http://www.youtube.com/v/wvYXoyxLv64&amp;fs=1&amp;rel=0" />
    </object>
    </div>
    Example 2 (Table Based)

    Code:
    <table border="0" cellspacing="0" cellpadding="0" width="680">
    	<tbody>
    		<tr>
    			<td rowspan="3" style="width:20px;padding:0;"><img src="http://media.wowstead.com/attachments/408/165/634808882107836556.jpg" alt="" width="20" height="425" /></td>
    			<td style="height:20px;padding:0;"><img src="http://media.wowstead.com/attachments/408/163/634808881815336556.jpg" alt="" width="640" height="20" /></td>
    			<td rowspan="3" style="width:20px;padding:0;"><img src="http://media.wowstead.com/attachments/408/166/634808882225460556.jpg" alt="" width="20" height="425" /></td>
    		</tr>
    		<tr>
    			<td> <object width="640" height="385" data="http://www.youtube.com/v/wvYXoyxLv64&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash">
    				<param name="data" value="http://www.youtube.com/v/wvYXoyxLv64&amp;fs=1&amp;rel=0" />
    				<param name="allowfullscreen" value="true" />
    				<param name="allowscriptaccess" value="always" />
    				<param name="wmode" value="opaque" />
    				<param name="src" value="http://www.youtube.com/v/wvYXoyxLv64&amp;fs=1&amp;rel=0" />
    			</object> </td>
    		</tr>
    		<tr>
    			<td style="height:20px;padding:0;"><img src="http://media.wowstead.com/attachments/408/164/634808881962132556.jpg" alt="" width="640" height="20" /></td>
    		</tr>
    	</tbody>
    </table>
    ^
    Gets changed to this.
    v

    Code:
    <table border="0" cellspacing="0" cellpadding="0" width="680">
    <tbody>
    <tr>
    <td style="width: 20px; padding: 0;" rowspan="3"><img src="http://media.wowstead.com/attachments/408/165/634808882107836556.jpg" alt="" width="20" height="425" /></td>
    <td style="height: 20px; padding: 0;"><img src="http://media.wowstead.com/attachments/408/163/634808881815336556.jpg" alt="" width="640" height="20" /></td>
    <td style="width: 20px; padding: 0;" rowspan="3"><img src="http://media.wowstead.com/attachments/408/166/634808882225460556.jpg" alt="" width="20" height="425" /></td>
    </tr>
    <tr>
    <td>
    <object width="640" height="385" data="http://www.youtube.com/v/wvYXoyxLv64&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash">
    <param name="data" value="http://www.youtube.com/v/wvYXoyxLv64&amp;fs=1&amp;rel=0" />
    <param name="allowfullscreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="wmode" value="opaque" />
    <param name="src" value="http://www.youtube.com/v/wvYXoyxLv64&amp;fs=1&amp;rel=0" />
    </object>
    </td>
    </tr>
    <tr>
    <td style="height: 20px; padding: 0;"><img src="http://media.wowstead.com/attachments/408/164/634808881962132556.jpg" alt="" width="640" height="20" /></td>
    </tr>
    </tbody>
    </table>

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    This should fix your problem,

    Code:
    <html>
    	<head>
    	<title> Index </title>
    		<style type="text/css">
    	*{margin:0; padding:0;}
    	iframe {
    		border-width: 20px;
    		-moz-border-image: url('iframe.png') 20 repeat;
    		-webkit-border-image: url(iframe.png) 20 repeat;
    		-o-border-image: url(iframe.png) 20 repeat;
    		border-image: url(iframe.png) 20 fill repeat;
    		padding:0;
    	}
    		</style>
    		
    		
    	</head>
    	<body>
    	<iframe width="680" class="video" height="435" src="http://www.youtube.com/embed/wvYXoyxLv64" scrolling="no" frameborder="0" style="overflow: scroll;" allowfullscreen></iframe>
    	</body>
    </html>
    iframe image: http://i.imgur.com/4c4X7.png

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Should I copy and paste the entire string of html from (html to end html) ?

    I tried that and the only thing that ended up showing in the post was the name of the page (index)

    I also attempted removing the html tags and the head and body tags. Is there a way to accomplish this without utilizing body and heading?

  • #4
    New Coder
    Join Date
    Jul 2012
    Posts
    62
    Thanks
    5
    Thanked 14 Times in 14 Posts
    Adding to your first example. This will add a 5px border around your video player with you image surrounding it. Don't forget to adjust your video player size depending on your border width. Note: I separated your CSS from the html so your style can be added in a <div> with the class name linking to the CSS.

    CSS:
    <style type="text/css">
    <!--
    .imageBorder {
    background-image:url('http://i45.tinypic.com/5bnucg.jpg');
    margin:auto;
    padding:20px;
    height:385px;
    width:640px;
    }
    .videoBorder {
    border: 5px solid #F60;
    }
    -->
    </style>


    HTML:
    <div class="imageBorder">
    <div class="videoBorder">
    <object width="630" height="375" data="http://www.youtube.com/v/wvYXoyxLv64&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash">
    <param name="allowfullscreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="wmode" value="opaque" />
    <param name="src" value="http://www.youtube.com/v/wvYXoyxLv64&amp;fs=1&amp;rel=0" />
    </object>
    </div>
    </div>

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I ended up using waynenort's suggestion.

    Altered it a little bit but finally got it working flawless.

    CSS
    Code:
    #videoborder
    <!--
    .imageBorder {
    background-image:url('http://i45.tinypic.com/5bnucg.jpg');
    padding:0px;
    height:425px;
    width:680px;
    }
    .videoBorder {
    background-image:url('http://i45.tinypic.com/5bnucg.jpg');
    background-repeat: no-repeat;
    padding:20px;
    }
    -->
    HTML

    Code:
    <div class="imageBorder">
    <div class="videoBorder">
    <object width="640" height="385" data="http://www.youtube.com/v/wvYXoyxLv64&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash">
    <param name="data" value="http://www.youtube.com/v/wvYXoyxLv64&amp;fs=1&amp;rel=0" />
    <param name="allowfullscreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="wmode" value="opaque" />
    <param name="src" value="http://www.youtube.com/v/wvYXoyxLv64&amp;fs=1&amp;rel=0" />
    </object>
    </div>
    </div>
    Now next question in regards to the same effort, How do I keep the entire thing centered? I tried using the <center> tag but didn't work.

    Thank you so much for your help thus far!

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    62
    Thanks
    5
    Thanked 14 Times in 14 Posts
    Put the margin:auto; back in .imageBorder {........
    And remove the #videoborder (not related to your centering issue, it's stray code)
    Last edited by waynenort; 08-20-2012 at 11:12 PM.


  •  

    Posting Permissions

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