CSS Question - PNG drop shadow on a video WordPress

Karlo Rihoo comments:

Question:

What if I need to change the size of the video which will bring it down on the page. Should I readjust the CSS everytime I change the height of the video?

Jatin Soni comments:

If you will set background for shadow

background: url(image/shadow.png)no-repeat center bottom;

than it will automatically stretch div according to the video height.

Karlo Rihoo comments:

So one more question before I put this to use later; Does the div ending go before or after the div with clear both:


<div style="clear:both;"></div>


Jatin Soni comments:

I don't understand what you mean. Can you please post your code? Where exactly you want to place this code <div style="clear:both;"></div>

Karlo Rihoo comments:

My code is one line no matter what editors I use (Notepad++ or Aptana 3), so I'm having a hard time reading it. I've also tried downloading in ASCII mode which someone else recommended (Doesn't work either). That's why the code is incomplete and I'm having a hard time explaining that part. Either way, I'll try this out and let you know. I'll come back to that last question if this doesn't work out.

Thanks.

Jatin Soni comments:

Okay no problem.

In share try to wrap shadow div around your entire video code (div or iframe or whatever) and use the css I provide you and it should work. Just let me know if you have any question regarding.

Karlo Rihoo comments:

Sure thing.

Thanks.

Karlo Rihoo comments:

Well, this is the result so far.

http://www.flickr.com/photos/88691628@N05/8101514508/in/photostream

Both sides get cutoff.

This is what my css looks like.


.shadow-div{background:url('images/bottom-shadow-with-corners.png')no-repeat center bottom;padding:0 1px 87px;}


If I change my code to this:


.shadow-div{background:url('images/bottom-shadow-with-corners.png')no-repeat center bottom;padding:0 0px 87px;}


It doesn't go any farther to the right. Not sure why the image gets cut off.

Let me know.

Jatin Soni comments:

Change this padding value padding:0 1px 87px; to something like padding:0 10pc 87px means change 1px value till you get proper shadow on both side

Karlo Rihoo comments:

I tried that. It doesn't work. I keeps going farther to the right. But both sides are still cut off.

Also, if I add the width and height attribute to the shadow-div class, it shows the full drop-shadow BUT it never lines up. I've tried every possible combination with padding.

Jatin Soni comments:

There should be something which is not lining up that div. Check child div css if there is something which causing this issue. May be your video div may have some margin or so. You need to check each respective elements. If you can't do than please post html, php and css code or at least your site URL.

If that is also not possible than add me on Skype ID "pixelandgrain" and will check directly on your screen.

Karlo Rihoo comments:

Here's the code:


<div style="margin-top:8px;" class="maintitle_noborder">Welcome to <span id="blog-name"><?php bloginfo('name'); ?></span></div>

<div style="margin-top:8px;" align="left"><p><? echo stripslashes($svp_index_welcome); ?></p></div><? } ?>

<? if ($svp_featured_index_video) { ?><div style="margin-top:8px;" class="maintitle_noborder"><span>Today's</span> Featured Video Pick</div>

<div class="shadow-div">

<div style="margin-top:8px;width:640px; height:360px; border: 1px #A1BD11 solid;" align="left"><? echo stripslashes($svp_featured_index_video); ?></div>

</div>



The maintitle_noborder class has nothing that I can see that will influence this.

I even tried removing the width and height from:


<div style="margin-top:8px;width:640px; height:360px; border: 1px #A1BD11 solid;" align="left"><? echo stripslashes($svp_featured_index_video); ?></div>


and nothing. I also tried using margins for the drop shadow and it would move the video across the page with it.

Let me know.

Thanks.

Jatin Soni comments:

I am looking now into your code and get back to you soon..

Karlo Rihoo comments:

Sure thing.

Thanks.

Jatin Soni comments:

Okay you wrote all css inline which is not good. I have done css for you just place into your theme style.css file

.shadow-div{
background:url(images/bottom-shadow-with-corners.png)no-repeat center bottom;
background-size:100%;
padding:20px 20px 87px;
margin:8px auto;
-moz-box=sizing:border-box;
-webkit-box=sizing:border-box;
box=sizing:border-box;
width:640px;
height:360px;
display:block;
}

.video-div{
margin:0;
padding:0;
width:640px;
height:360px;
border:1px solid #a1bd11;
display:block;
background:#f4f4f4; /* this just for testing you can remove once you done */
}

Now remove all inline style from Video div and assign class="video-div" to that div as below

<div class="shadow-div">
<div class="video-div">
<?php echo stripslashes($svp_featured_index_video); ?>
</div>
</div>

Width for the shadow div and video div is the same and I used box-sizing to keep width and height same for both divs. I also added background-size:100% which will always fits shadow with your shadow-div. However you may require to play with padding.according to you shadow.

If you still not getting what you want. I would strongly suggest you to come on skype to resolve your issue on the spot.

Karlo Rihoo comments:

OK.

I will try this later today and let you know.

Thanks.

Karlo Rihoo comments:

Hi,

That partially worked. It looks ok but it's not exactly what I'm looking for. Yes this is the
same drop shadow image. Weird I know. I think it has something to do with the size that it's being
declared as. It's being declared as 640x360 but the image is 736x311. The video is 640x360. When I change
the size of the image, it goes somewhere else on the page.

Here's a pic of what it looks like.

http://www.flickr.com/photos/88691628@N05/8106336184/in/photostream

Here's a pic of what it should look like.

http://www.flickr.com/photos/88691628@N05/8106330549/in/photostream

I'll try to figure this out.

Thanks.

Jatin Soni comments:

Try to change this css

.shadow-div{

background:url(images/bottom-shadow-with-corners.png)no-repeat center bottom;
background-size:100%;
padding:20px 20px 87px;
margin:8px auto;
-moz-box=sizing:border-box;
-webkit-box=sizing:border-box;
box=sizing:border-box;
width:640px;
height:360px;
display:block;
}

Karlo Rihoo comments:

I already tried. Is it any different from what you already gave me?

Jatin Soni comments:

I have changed padding value in that css

Karlo Rihoo comments:

I have the padding set at 5px 5px 77px and it looks like what i showed in the picture.

When I change it to 20px 20px 87px it doesn't look right and it moves the video along with it.

Jatin Soni comments:

Can you please come on skyep quickly? my id is "pixelandgrain"

Karlo Rihoo comments:

Hi Jatin,

Thanks to you, I figured out how to add another drop shadow within 5 minutes since that one wasn't going to work.

Thanks for your help.