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
Related
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
I want to show a close/cancel button on full screen youtube video, but youtube video iframe has z-index 2147483647 and I have also set same z-index to my div but it is not showing above iframe.
Here is my code :
<body>
...
// some other content
...
<div id="custom_button">close</div>
// iframe
</body>
I have used below code to full screen iframe :
var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
if (requestFullScreen)
{
requestFullScreen.bind(iframe)();
}
And I have set css for custom_button :
z-index: 2147483647;
position: absolute;
top: 30%;
right: 1%;
color: #fff;
cursor: pointer;
width: 50px;
height: 50px;
But it is not showing above full screen iframe.
How to do that?
I am creating a testimonials page and have numerous instances of jPlayer loading.
I initialize the players with this function:
initializePlayer: function (playerId,audio) {
$("#" + playerId).jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: audio
});
},
play: function() {
$(this).jPlayer("pauseOthers");
},
swfPath: "/assets/scripts",
supplied: "mp3"
});
},
The html for rendered players look like this:
<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 0px; height: 0px;">
<img id="jp_poster_1" style="width: 0px; height: 0px; display: none;">
<audio id="jp_audio_1" preload="metadata" src="/assets/images/testimonials/Melva"></audio>
</div>
<div id="jp_container_1" class="jp-audio span3">...</div>
NOTE: I am not showing the contents of jp_container_1 because it is the standard jplayer. I have not adjusted it at all.
The only difference between each player is the int in the ids and the src:
<div id="jquery_jplayer_2" class="jp-jplayer" style="width: 0px; height: 0px;">
<img id="jp_poster_2" style="width: 0px; height: 0px; display: none;">
<audio id="jp_audio_2" preload="metadata" src="/assets/images/testimonials/Mark.mp3"></audio>
</div>
<div id="jp_container_2" class="jp-audio span3">...</div>
If I include the play portion of the initializer, none of the them play. If I exclude it, all of them play on the second player jquery_jplayer_1 and not on any of the rest.
What am I missing? Why are the all linked to the 1 player?
it appears that you have not set the cssSelectorAncestor value. If you read the documentation here:
http://jplayer.org/latest/developer-guide/#jPlayer-option-cssSelectorAncestor
You will see that the default is jp_container_1, which would explain why they are all playing on the same player. I believe that setting that value for each player will make it work as you expect.
first set the
cssSelectorAncestor: "#jp_container_1"
for all player as 1,2,3 then at the bottom of the jplayer functionality
$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
$("#jplayer_inspector_2").jPlayerInspector({jPlayer:$("#jquery_jplayer_2")});
give like this for all players
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
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...