Old code is
<p><img style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0;" src="jim.jpg" alt="" /></p>
<audio autoplay=""> <source src="horn.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>`
`
Chrome disabled audio playing by default on pages back in 2018, want to make the image clickable instead to play a the sound
Related
I'm trying to add an unmute button to our Squarespace video header (Vimeo). I have found various methods but nothing seems to be working.
view site here
Here is the code Squarespace creates in the header...
<div class="sqs-video-background content-fill" data-config-url="https://vimeo.com/779083883" data-config-playback-speed="1" data-config-filter="1" data-config-filter-strength="89">
<div id="player" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<iframe id="vimeoplayer" src="//player.vimeo.com/video/779083883?api=1&background=1" class="background-video ready" style="width: 1123.56px; height: 632px; left: -159.278px; top: 0px;">
</iframe>
</div>
</div>
I tried following the instructions outlined here, using the iframe id in place of "video"
https://discourse.webflow.com/t/custom-button-to-unmute-vimeo-embed/181629
Video Mute and unmute button
What i have
If I have two images (one includes frame and another includes the picture),
My question
can I show it in the same image by using Polymer? I think it looks like bitmap in android and I want to do in web but I really don't know how
Here is one example on how to place a picture over a picture. Since I didn't have any pictures i "faked" them with span tags. Plunkr
<style>
.pic-one{
background: red;
position: absolute;
height: 30px;
width: 30px;
}
.pic-two{
background: blue;
position: absolute;
margin: 5px 5px;
height: 20px;
width: 20px;
}
</style>
<div class='container'>
<span class='pic-one'></span>
<span class='pic-two'></span>
</div>
I have a problem with safari. I have searched for 6 hours straight for a fix, so exscuse me if my explanation is bad. So the thing is: I have added a hover effect on my thumbnails, it works in all browsers, but the thumbs are not placed correctly in safari and IE.
I have tried to use:
#media screen and (-webkit-min-device-pixel-ratio:0){
img.a {
position: absolute;
top: -500;
z-index: 10;
}
img.b {
position: absolute;
top: -500;
}
}
But this works for webkit browser, meaning chrome as well.
The css I am currently using which works in chrome and firefox:
img.a {
position: absolute;
top: -500;
margin-left: -115px;
z-index: 10;
width: 230px;
height: 120px;
border: none;
}
img.b {
position: absolute;
top: -500;
margin-left: -115px;
width: 230px;
height: 120px;
border: none;
}
If anyone has a solution it would really save my day :)
Here is the site if you need to inspect: www.janthorb.com
Get rid of the CSS
div#thumbnails {
text-align:center;
}
and also get rid of your margin-left: -115px for your images and you will have something that works in both browswers.
You page code is a mess, no alignment. HTML structure is not reasonable, and cause CSS also is very not science. I rewrote your structure, you can reference.
.demo{ width:820px;margin:0 auto;}
.list{ margin-right:-20px; zoom:1;}
.list li{ float:left; width:230px; height:135px; margin:0 36px 25px 0; overflow:hidden; zoom:1;}
.link{ position:relative;width:228px; height:120px; display:block;border:thin dashed #1b1b1b; overflow:hidden;}
.link img{ position:absolute;top:0;left:0; }
.link .gray{ z-index:11;}
.link .hover{ z-index:10;}
<ul class="list">
<li>
<a class="link" href="#">
<img class="gray" src="http://www.janthorb.com/thumb1_bw.jpg" alt="">
<img class="hover" src="http://www.janthorb.com/thumb1.jpg" alt="">
</a>
</li>
<li>
<a class="link" href="#">
<img class="gray" src="http://www.janthorb.com/thumb1_bw.jpg" alt="">
<img class="hover" src="http://www.janthorb.com/thumb1.jpg" alt="">
</a>
</li>
</ul>
and demo is here
At my site on the first page i have two images put together so it looks like a sunset. I want to my logo to go down between them as if it was the sun, but i cant make this happend. The logo is currently at the second page of the site
Heres i the html:
<div id="intro">
<div id="introbaggrundbagved"></div>
<a name="section1" class="section">SECTION 1</a>
<div id="logo">
</div>
</div> <!--#intro-->
And the css:
#intro{
background: url('images/introforan.png') no-repeat center;
height: 900px;
margin: 0;
position: relative;
z-index: 3;
}
#introbaggrundbagved{
background: url('images/introbagved.png') no-repeat center;
height: 900px;
width: 1440;
margin:0;
position: relative;
}
#logo{
background: transparent url('images/logo.png') no-repeat center;
width: 600px;
height: 600px;
position: relative;
margin-left: 420px;
margin-top: 100px;
z-index: 2;
}
You need to take the #logo div out of its parent element #introand give it a z-index that is larger than both of its siblings— then wrap all of the header elements into an #intro-wrapper div. In addition, I would then position the #logo element using position: absolute, instead of relative, this will give you more granular control on it's placement without disturbing the document flow of the surrounding elements.
Also, it appears that you have the function parallaxScroll updating the top property of #logo, which will prevent the element from being placed between your two images.
function parallaxScroll(){
var scrolledY = $(window).scrollTop();
$('#logo').css('top','+'+((scrolledY*.376))+'px');
....
}
After many hours I figured out why the links within my pngs in IE6 do not work.
It's because Im using filter:progid:dximagetransform.microsoft.alphaimageloader within my CSS. Yet after many more hours I have not found a solution to fixing these links.
Here is my code...
HTML
<div id="fullwidth-header-wrapper">
<div id="header"> <strong class="logo"> Google </strong>
<div id="nav">
<ul>
<span>
<span style="color: white;">Prefer</span>
Google? Click
here!
</span>
</ul>
</div>
</div>
</div>
CSS
#fullwidth-header-wrapper {
height: 120px;
}
#header {
background:url(../images/header-bg.png) no-repeat 50% 0;
height: 138px;
width: 980px;
margin: 0 auto;
position: relative;
top:0;
}
.logo{
background:url(../images/logo.png) no-repeat;
display:block;
width:500px;
height:125px;
position:absolute;
top:40px;
left:85px;
}
.logo a{
display:block;
width:323px;
height:85px;
text-indent:-9999px;
overflow:hidden;
}
#nav {
background:url(none.gif);
filter:progid:dximagetransform.microsoft.alphaimageloader(src='images/nav.png', sizingmethod='crop');
display: inline;
position: absolute;
top: -8px;
right: 30px;
width: 350px;
height: 75px;
z-index: 150;
}
#nav ul {
position: relative;
top: 18px;
left: 0px;
color: rgb(87, 175, 237);
font-size: 96.8%;
z-index:200;
}
#nav span {
color: #fff;
position: absolute;
top: 18px;
left: 0px;
font-size: 96.8%;
}
#nav a {color: rgb(255, 255, 255);}
How do you fix this issue or avoid this and suggestions re: a possible solution for the above?
Thanks!
Try this: http://www.hrunting.org/csstests/iealpha.html
In short:
What matters is that the element with the filter has no position set and the link within the filtered element has a position set. If that's the case, links within the filtered element will work.
Since your #nav element has position: absolute, you'll need to add a wrapper div around that and absolutely position that instead.
This is often a problem with using a png fix on something that contains links, the Alpha version of the twinhelix png fix has apparently solved this issue. I have used it, its a little buggy still or at least it was a few months ago, but used right on small sites it is production ready http://www.twinhelix.com/css/iepngfix/.
I normally use the twinhelix 1.0 script for all our sites, I include an ie6.css stylesheet with a conditional comment aimed at IE6:
<!--[if lt IE 7]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css" charset="utf-8">
<![endif]-->
Inside there you then in the CSS you just call it using the 'behavior' rule. IE 7 and 8 do transparent png's just fine. You do need to make sure you have a blank.gif 1px by 1px transparent gif somewhere and update the htc file (which really is just JS) to link to the path of that image.
#nav {
behavior: url(/css/iepngfix.htc);
}
I hope this helps
I had a similar problem, I was using a transparent background so I had to apply the png fix. I had a div and a link around it, like this:
<div id="bla"></div>
The links were not working at all in IE6. When I applied position: relative to that bla div, it worked! position: relative seems to work wonders on IE6, as well as float: left sometimes...