I have videos that play on hover but the overlays I use block this function. I'd like to have an opaque overlay with text pop up over the video and it still plays on hover. So my question is how can I add a text and opaque overlay that doesn't block the play on hover.
reference: https://axisstudiosgroup.com/work/
I am using the following:
js:
jQuery(document).ready(function($){
var oPlayer = $("#" + this.id);
$('.work-grid .work-item').on('mouseenter', '.play-video', function(e) {
e.preventDefault();
oPlayer = $(this);
froogaloop = $f(oPlayer[0].id);
froogaloop.api('play');
}).mouseleave(function() {
froogaloop = $f(oPlayer[0].id);
froogaloop.api('pause');
froogaloop.api("seekTo", 0);
});
});
css:
.work-grid {
display: grid;
grid-row-gap: 25px;
width: 100%;
margin-bottom: 80px;
}
.work-item {
position: relative;
margin-top: 0px;
overflow: visible;
}
.work-wrap {
position: relative;
padding-bottom: 58.25%;
}
.work-item iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0.125rem solid transparent;
}
.work-item img {
display: block;
height: auto;
max-width: 100%;
height: 100%;
width: 100%;
}
html
<div class="work-grid">
<div class="work-item">
<div class="work-wrap">
<a href="#">
<div class="work-item-overlay">
</div>
<div>
<iframe id="player1" class="play-video" src="https://player.vimeo.com/video/#?api=1&player_id=player1&title=0&byline=0&portrait=0&autoplay=0&background=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="work-item-details">
<h3 class="work-item-title">Title</h3>
</div>
</a>
</div>
</div>
Actually, this was solved by simply moving the overlay div to a different position.
<div class="work-item">
<div class="work-wrap">
<a href="example.com">
<div>
<iframe id="player29" class="play-video" src="https://player.vimeo.com/video/#?api=1&player_id=player29&title=0&byline=0&portrait=0&autoplay=0&muted=1&background=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="work-item-details">
<div class="work-item-overlay">
<h3 class="work-item-title">TITLE</h3></div>
</div>
</a>
</div>
</div>
Related
I created an HTML page with two IFRAME windows.
I want to change the addresses between them when the "Enter" key is pressed.
Thanks!
<body style="background-color:black;">
<iframe class="g" src="www.example.com" scrolling="no" frameborder="0" height="100%" width="100%" allowfullscreen></iframe>
<div id="overlay"><iframe src="www.wow.com" scrolling="no" frameborder="0" marginheight="0px" height="205px" width="360px" allowfullscreen></iframe>
<style> #overlay {
position: absolute;
top: 430px;
right: 15px;
color: #FFF;
text-align: center;
font-size: 20px;
width: 400px;
padding: 10px 0;
z-index: 2147483647;
}
.g {
height: 100%;
}
#v {
z-index: 1;
}</style></div><div style='text-align: right;position: fixed;z-index:9999999;bottom: 0; width: 100%;cursor: pointer;line-height: 0;display:block !important;'></div></body>
Apply Javascript here.
Onsubmit/onclick enter key you have to set the src attribute of iframe tag.
In my HTML website I have a button, and I try add an transparent image over this button. And I can't click in this button after.
My problem is something like this:
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
<a href="#">
Click here
</a>
</div>
Thanks very much for your help!
To fix this you can set the z-index of the image lower than the a element (which defaults to 0)
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
<a href="#">
Click here
</a>
</div>
Alternatively you could use the image as a background on the container and avoid the need to position it absolutely, or have to change z-index at all.
you need to add a z-index to the button and give it position relative
.button {
z-index: 1;
position: relative;
}
Here is the code you need to use
html
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px";height="200px"/>
<a class="button" href="#">
Click here
</a>
css
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
.button {
z-index: 10;
position: relative;
}
See js fiddle here
You can alter width and height of image-container as you wish..
#container {
height: 400px;
width: 400px;
position: relative;
}
#image-container{
width:100%;
height:100%;
background-image: url("http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png");
background-position:center;
background-size:contain;
}
<div id="container">
<div id="image-container">
<a href="#">
Click here
</a>
</div>
</div>
So right now, I have a 3x3 iframes. I added divs and overlayed them on the videos, and bind a click on the divs. It seems to work but: 1.) I cant make it go back down to the normal size. Kind of a toggle thing.
$(document).ready(function() {
var height = $(window).height();
var width = $(window).width();
$('.div1').on("click", function() {
$(this).next('.video').css({
'height': height,
'width': width,
'position': 'absolute',
'z-index': '2'
});
});
});
html,
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.main-content {
height: 100%;
width: 100%;
padding-bottom: 0px;
display: flex;
flex-direction: center;
align-items: center
}
.flex-videos {
display: flex;
flex-direction: row;
height: 33%;
width: 100%;
min-width: 960px;
overflow: hidden;
margin: 0;
li {
list-style: none;
width: 100%;
height: 100%;
margin: 0;
}
}
.div1 {
display: inline-block !important;
position: absolute;
z-index: 3;
height: 256px;
width: 480px;
}
.flex-video-container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
min-width: 800px;
}
.video {
top: 0;
left: 0;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="main-content">
<div class="flex-video-container" id="contentDiv">
<ul class="flex-videos">
<li>
<div class="div1"></div>
<iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
</li>
<li>
<div class="div1"></div>
<iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
</li>
<li>
<div class="div1"></div>
<iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
</li>
</ul>
<ul class="flex-videos">
<li>
<div class="div1"></div>
<iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
</li>
<li>
<div class="div1"></div>
<iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
</li>
<li>
<div class="div1"></div>
<iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
</li>
</ul>
<ul class="flex-videos">
<li>
<div class="div1"></div>
<iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
</li>
<li>
<div class="div1"></div>
<iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
</li>
<li>
<div class="div1"></div>
<iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
</li>
</ul>
</div>
</div>
Here's a jsfiddle to show what I currently have.
The below code should do what you want. Checks whether the video was enlarged and removes the inline css so it returns to the normal size if it was. Otherwise the video is enlarged.
$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var enlarged = false;
$('.div1').on("click", function(){
if(!enlarged){
$(this).next('.video').css({'height': height, 'width': width, 'position': 'absolute', 'z-index':'2'});
enlarged = true;
}
else{
$(this).next('.video').attr('style', '');
enlarged = false;
}
});
});
<style type="text/css">
.xyz {
position: absolute;
top: 100px;
left: 140px;
z-index: -1;
}
#container {
position: relative;
overflow: hidden;
opacity: .2;
}
</style>
<body>
<div>
<video id="container" autoplay loop muted>
<source src="<%=request.getContextPath()%>/Files/images/sample.mp4" type="video/mp4">
</video>
<div class="xyz">
<a href="<%=request.getContextPath() %>/Files/jsp/Home.jsp">
<img src="<%=request.getContextPath() %>/Files/images/play.png" height="50" width="50"
onmouseover="this.src='<%=request.getContextPath()%>/Files/images/Koala.jpg'">
</a>
</div>
</div>
</body>
The anchor tag here is not working.
The image play.png should change to Koala.jpg on mouse over and when clicked Home.jsp should be displayed. But the code is working without div. Using anchor in div neither image is gettig changed using mouseover nor linking to Home.jsp.
Just remove z-index from the CSS . Changed code :
.xyz {
position: absolute;
top: 100px;
left: 140px;
}
Live site- http://uposonghar.com/new-video/
If you hover YouTube video on that page you can see 2 sharing buttons appear. That is not working on IE.
That is working perfectly when i put iframe src blank but doesn't work when i put put youtube video link on iframe src. Check this- uposonghar.com/test/ie.html
HTML-
<div id="video-container" onmouseover="mouseoverBox1()" onmouseout="mouseoutBox1()">
<iframe src="//www.youtube.com/embed/-Jkd9GDSyPc" style="border:1px solid #F00;background:#063;" width="600" height="400" allowfullscreen="" frameborder="0"></iframe>
<ul class="share-video-overlay" id="share-video-overlay">
<li class="facebook" id="facebook"><a class="shareNew" href="https://www.facebook.com/sharer/sharer.php?u=http://uposonghar.com/new-video/" target="_blank" onclick="return windowpop(this.href, 600, 400);" data-reveal-id="myModal">Facebook</a></li>
<li class="twitter" id="twitter"><a class="shareNew" href="http://www.twitter.com/share?&text=Check+this+video&url=http://uposonghar.com/new-video/" target="_blank" onclick="return windowpop(this.href, 600, 400);" data-reveal-id="myModal">Tweet</a></li>
</ul>
</div>
JS
<script type="text/javascript">
function mouseoverBox1(){
var myPara = document.getElementById("share-video-overlay");
myPara.style.display = "block";
}
function mouseoutBox1(){
var myPara = document.getElementById("share-video-overlay");
myPara.style.display = "none";
}
</script>
CSS-
#video-container {
display: block;
position: relative;
width: 600px;
height: 400px;
}
#video-container:after {
clear: both;
}
#share-video-overlay {
display: none;
position: absolute;
left: 0;
top: 150px;
}
.share-video-overlay li {
margin: 5px 0px 5px 0px;
}
Append wmode=transparent parameter to the iframe src: example
<iframe
width="600"
height="400"
src="//www.youtube.com/embed/-Jkd9GDSyPc?wmode=transparent"
frameborder="0" allowfullscreen="">
</iframe>