I'm embedding a YouTube <iframe> in my website. I would like to delete the gray gradient shadow under the title of the video but can't seem to find how.
I did a lot of research on this but found that you can't remove the title anymore. I was wondering if you can still remove the gray shadow under the title. I just want the video to look clean with a play button and I'd add a drop shadow behind it. I need this because this is in line with my design of my website.
Playing with inspect element I found that .ytp-gradient-topis the class that causes the gradient shadow, I just don't know how to get rid of it.
Any help is appreciated!
Gradient shadow I want to remove
You can't change the CSS of an element within the iframe due to the same origin policy.
At the .shadow class add text-shadow:none and remove the remaining tags that are not working. There are no shadows for that iframe after you add this !
Hope this is what you are looking for...
Related
I'm working in an Angular 8 project.
I have an iframe. it looks like this:
As you can see there is a black "border" around the document. I say "border" because it might actually just be the black background the iframe shows the document on top of.
I want to remove this black bordering, to get a result that'll be more like this (basically I want a seamless sort of style for the iframe):
I've read through the answers regarding this here, but none of them seem to work, and most of the answers are years old.frameBorder doesn't work because it's deprecated. Setting the style of the iframe to have no border doesn't remove the black lining. I also tried to set the background color to not be black but that also didn't work. seamless is also deprecated.
How can I remove this black lining?
Any help would be appreciated. Thank you.
Here's some code if it helps, but it's just an iframe.
<iframe [src]="myURL">
Sorry your browser does not support inline frames
</iframe>
I'm trying to emulate the way this site does their shadow gradient inside divs ( http://zeroturnaround.com/software/jrebel/roi-calculator/#headline )
Check this picture
Not sure how to get the border shadow portion that the arrows point to
Thanks !
It's an image they are using to do it. This is their source sprite sheet
That specific border image in near the bottom.
I agree with you though, it looks good and I wish it was possible in pure code but I'm sure if that's possible yet, or else I'd be able to help you more.
By the way, I suggest you get the Firebug add on for Firefox. All I had to do was right click in that area and inspect with firebug and it told me right away what exactly that border was created from.
Click this link to see my concept image regarding the subject: http://i45.tinypic.com/k33c0i.jpg
Hi! Is it possible to do such custom "sliders" for overflowing content without the default Scrollers? It doesn't matter how the actual transition goes (could work just like the regular horizontal scrollbar for i care, just without the ugly default gray buttons/bar). Preferably i would like to do it just with CSS, but if not, i'll consider other ways to do it aswell. Or i'll just simply create another page to the remaining images.
http://www.visioville.fi/en/
Thanks!
You can get rid of the scrollbars by setting
overflow:hidden
in CSS, which will "clip" the DIV contents.
I don't think there is a pure CSS way to scroll it. That is easily doable with jQuery.ScrollTo - just bind hover() or click() events to your arrow icons.
Take a look at this site, I believe it will be of some use to you. It's what I've used in the past: http://jscrollpane.kelvinluck.com/
i was wondering if anyone could help me with css. ive been stuck on using background-attachment:fixed;
it just doesn't seem to work. im basically trying to make an image a link, but i don't want it to scroll so i made it into a bg image.
i have...
when i take out background-attachment:fixed, i see the image, but once i put it in, it disappears. i deliberately left out text between the anchor tags so the image is like a clickable link : D
ive been super stuck. help would be much appreciated. thanks! css syntax is confusing...
Simply add a character to your anchor tag. A non breaking space will do the trick.
See my example on the very useful tool, jsfiddle.net.
I am working on a div which should show a drop shadow at the bottom and right. Here is the link to the html page. I dont know why the classes are not getting applied to the div. Your help is highly appreciated.
Tooltip.html
Here is the image mock-up which shows the Drop shadow affect
Image-mockup
This might help...
You can also drew shadows using css3 in the browser that supported it. Like:
-moz-box-shadow