On my page I am embedding a video from vimeo as so
<h4>Favopurite songs</h4>
<ul>
<li>
<a href="https://player.vimeo.com/video/9159308?autoplay=1" target="vimeoPlayer">
Three little birds
</a>
<li>
</ul>
<section id="player">
<iframe class="first" src="#" name="vimeoPlayer" width="200" height="150"
frameborder="1" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</section>
For the css I have
iframe {filter: grayscale(100%)}
This is working in all browsers but not internet exploere 11.
I am aware that since internet exploere 10 they removed the filter property.
I have come across multiple fiddles that are suggested for images and that have hover effects over them.
I am purely looking to add a greyscale filter to my embedded videos without any hover effects and some of the fiddles I found wont work with embedded video.
any help would be greatly appriciated, Thanks
use this for different browsers
iframe{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
now test in IE11.
if IE 11 doesn't support css filters, you have to use a javascript solution to do the same thing.
cross browser grayscale
That link explains the process in detail, using modernizer to detect browsers and so on. It'd be a lot of work to implement though.
Related
I am trying to center an image in a block using CSS and HTML. The code I am currently using works for both firefox and chrome but Microsoft Edge will not center. Chrome and firefox are both picking up the webp format of the image, while internet explorer is picking up the png.
I have tried using inline property instead of block for css. I have tried creating a function in CSS and applying that function to the HTML. I have tried setting an attribute name to the HTML box and editing the css to alter that box only. Virtually all of these things except for inline have worked on chrome and firefox. None work on edge.
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.png" type="image/png">
<img src="image.png" alt="circle of excellence" class="displayed" width="300" height="290">
</picture>
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
I expected the image to be centered on all browsers. It was centered on all but Internet Explorer. I take this to mean there is something wrong with the way the png image is interacting with the code. Or my code is written in such a way as to exclude the png from centering.
Apparently the cash needed to reset in my microsoft edge. This code works perfectly. SMH
I just center the picture tag and it is working fine..
try this...
picture {
display: block;
text-align: center;
}
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.png" type="image/png">
<img src="image.png" alt="circle of excellence" class="displayed" width="300" height="290">
</picture>
How to do i make blur background exactly like this image using only css3 html5 See the background
use filter property in css
.blur{
-webkit-filter: blur(10px);
filter: blur(10px);
}
<img src="http://placekitten.com/g/500/500" class="blur" width="200px">
<img src="http://placekitten.com/g/500/500" class="" width="200px">
I'm trying to hide info window from Google embedded map. I was searching for solution, but can't find it anywhere.I want to hide info window and leave link for bigger map.
Link to map: http://dev01-www.erisata.lt/en.html#contacts
Any solutions for this?
You can't, but you can do a workaround for your case, by adding a new div with absolute position to hide the google map text content, replace your map-container div by :
<div class="map-container">
<section style="background:#75716a; background: #e5e5e5;padding: 0;position:relative;">
<iframe scrolling="no" width="100%" height="400" frameborder="0" style="border:0; -webkit-filter: grayscale(100%); filter: grayscale(100%);" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6522.283005371661!2d25.278750538590636!3d54.69246783787969!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46dd941c3397b6eb%3A0x20df28c924221cdd!2zxaBlaW15bmnFoWtpxbMgZy4gMjMsIFZpbG5pdXMgMDkyMDA!5e0!3m2!1slt!2slt!4v1479197857183" allowfullscreen="" class=""></iframe>
<div width="100%" style="left:0;right:0;position: absolute;bottom: 0px;background: #e5e5e5;"> </div>
</section>
</div>
I put an iframe youtube code in div tag.
<div id="wrap">
<iframe width="300" height="315"
src="//www.youtube.com/embed/82fn4mcNGJY"
frameborder="0" allowfullscreen></iframe>
</div>
When I use css to set scale for this div tag, Firefox does not display the video
#wrap{
transform: scale(1.06667);
transform-origin: 0px 0px 0px;
}
link to demo
the reason that your are using css property
transform: scale(1.06667);
it will work fine without this property
Of course it'not a response..but I have exactly the same problem.
It don't works only on youtube video (maybe an embed problem). It the src iframe attribute point to another generic website,it works fine.
The problem is only on Firefox linux. It's all right on FF for OSX.
I have used a google map in iframe.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps?f=q&source=s_q&hl=en&geocode=&q=Madurai,+Tamil+Nadu&aq=0&oq=madursi&sll=10.782836,78.288503&sspn=5.674603,10.755615&ie=UTF8&hq=&hnear=Madurai,+Tamil+Nadu&t=m&z=12&ll=9.925201,78.119775&output=embed"></iframe><br /><small>View Larger Map</small>
How to display a google map in black and white color?
It does work, but you should also add the formatting that the different browsers require for grayscale.
<div style="-webkit-filter: grayscale(100%);
filter: grayscale(100%);">
Here's the fiddle: http://jsfiddle.net/j9p9w62f/
By rights the only way to make a black and white Google Map is to use their Styled Maps api
Your post was tagged with API so I assume a non-iframe option is ok for you. If the inclusion method is not fixed this might will give you an idea of alternative. It is also possible to use the styled maps to generate a Google Static Map which would then also be iFrame friendly.
You could also take a look at Stamen maps Which are based on Open Street Maps, but can be used as overlay layers to Google Maps. The form of delivery is not likely possible just through a crafted iframe url.
Try to use
<iframe class="map" width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps(...)"></iframe>
.map {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
This will help
This one is achieved by using some css
Here is working code
.map {
filter: grayscale(100%);
}
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4917.1193047590605!2d4.4690507720313!3d51.96022102967837!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c5cb67ae23c02d%3A0xdac4c06bc7904d2!2sRododendronplein+10%2C+3053+ES+Rotterdam%2C+Nederland!5e0!3m2!1snl!2ses!4v1541007683407" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Add a <div> arround the <iframe> and stle it as:
webkit-filter: grayscale(100%);
Have you tried https://mapstyle.withgoogle.com/? You can configure it as you wish and have an url or json ready to use in your code.