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>
Related
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>
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.
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;
}
I'm using JavaScript with HTML and I have a page that includes multiple iframes. I want to be able to blur some of these iframse (not hide then) so that users can see what is inside these frames but cannot click on them or type in them.
Is there a way to do this?
iframe.contents().find('body').blur()
Something like this may be what you want: http://jsfiddle.net/Paulpro/xcWcn/1/
HTML:
<div id="frame1-blocker" class="frame-blocker"></div>
<iframe id="frame1" src="http://google.com" style="width: 500px; height: 300px; padding: 0px; border: 0px;"/>
CSS:
.frame-blocker{
background-color: rgba(0,0,0,0.5);
position: absolute;
width: 500px;
height: 300px;
}
I would suggest positioning a transparent DIV over each "blurred" iFrame to prevent clock events propagating downward. iFrame tags themselves do not to my knowledge provide the functionality you want.
And for what it's worth, "blur" in Web parlance refers to moving the text cursor outside of a control!
Here is a demo of a way using an overlay within the iframe:
#hidden {
display: none;
}
iframe {
width: 200px;
height: 200px;
}
a {
color: #f00;
text-decoration: underline;
cursor: pointer;
}
<div>
<a class="activate" rel="1">Active Test 1</a><br/>
<a class="activate" rel="2">Active Test 2</a><br/>
<a class="activate" rel="3">Active Test 3</a>
</div>
<iframe id="test1"></iframe>
<iframe id="test2"></iframe>
<iframe id="test3"></iframe>
<div id="hidden">
<div id="overlay" style="display: none; position: absolute; left: 0; top: 0; z-index: 100; background-color: #000;"></div>
<div>
http://www.yahoo.com/
</div>
</div>
$('iframe').each(function(){
$(this).contents().find('body').append($('#hidden').html());
});
$('div a.activate').click(function(){
$('iframe[id^=test]').contents().find('#overlay')
.css('height','200px')
.css('width','200px')
.fadeTo('fast', 0.5);
$('iframe#test'+this.rel).contents().find('#overlay')
.css('height','0')
.css('width','0')
.fadeTo('fast', 1);
});
http://jsfiddle.net/ZTpXa/