Develop Reference

How disable div element on iframe by sandbox?

How disable div element on iframe by sandbox? I searched in internet about this subject but I didn't find anything about it , Please guide me how is it possible ?
in the source code of this iframe :
<div id="countDown"
style="display: ; font-family:verdana; font-size:10px;
text-align:center;color:#ffffff;position:absolute;top:182.5px;
left:360px; z-index:10000000">Close the ads in
<span id="count">30 </span> seconds
</div>
<a href="javascript:void(0)" onclick="javascript:hideOverlay('total')" >
<img id="closeFrame1" name="closeFrame1" style="position:absolute;top:207.5px;
left:312.5px;border:0; z-index:10000011"
title="Close" alt="Close" width="12px" height="12px"
src="http://www.playerhd2.pw/jwplayer5/x-fonter.gif" />
</a>
<div id="second_ads_tmp" class="ad" align="center"
style="border: 0px red solid; top:195px; left:287.5px;
z-index:50000012; opacity: 0.0">
<IFRAME style="z-index: 1000;" FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=300 HEIGHT=250
SRC='http://vm.timeinabottle.pw/XnewadsX/ads1x300go.html'></IFRAME>
<!-- END TAG --> </div>
</div>
<div id="total_banner" onkeydown="return false" style="display: none;" >
<div class="container_embed"></div>
<div align="center" id="ads_banner1"
style="border: 0px blue solid; position: absolute;
top:445px; left:0px; width: 100%; height: 90px;
z-index:10000010; opacity:0.9">
</div>
<a href="javascript:void(0)" onclick="javascript:hideOverlayBanner('total_banner', 'ads_banner1')"
style="display: none;" >
<img id="closeFrame_banner" name="closeFrame_banner" style="position:absolute;top:450px;
left: 90px ;border:0; z-index:10000011"
title="Close" alt="Close" width="12px" height="12px"
src="http://www.playerhd2.pw/jwplayer5/x-fonter.gif" />
</a>
<div id="second_banner_ads_tmp" align="center" id="ads_banner1_second"
style="display: ; border: 0px red solid; position: absolute;
top:445px; left:0px; width: 100%; height: 90px;
z-index:50000012; opacity:0.0">
<IFRAME id="secondFrame" style="z-index: 1000; "
FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=728 HEIGHT=90
SRC="">
</IFRAME> </div>
</div>
This is the iframe code on my web page:
<iframe src="http://www.playerhd2.pw/channel.php?file=130&width=890&height=640&autostart=true"
width="890"
height="640"
frameborder="0"
scrolling="no"
allowfullscreen
sandbox="allow-same-origin allow-scripts"></iframe>

Multiple videos with multiple classes used in one js function

That title is quite confusing, I know.
So briefly, I have 5 videos and want them all to use js to play AND pause them individually onclick.
Each video has a different class, but I've given them all a second class to group them together. (to my knowledge)
my js :
var myVideo = document.getElementByClassName("videos");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
my html: (all 5 videos are idential html except the id's)
<div class="video1">
<video id="video1" class="videos video1" width="500" height="303" onclick="playPause();">
<source src="hlace.mp4" type="video/mp4">
<source src="hlace.ogg" type="video/ogg">
</video>
</div>
I've used .getElementById and the js has worked for the video which Id I used. But now I want to apply it for all the videos and I'm stumped.
https://jsfiddle.net/jomot/1jvq1myf/

You can do something like below -
Your js fiddle code has many errors due to the videos and the main error is -
This
var myVideo = document.getElementByClassName("videos");
should be changed to
var myVideo = document.getElementsByClassName("videos");
The below code will give you an idea of what you need to do. You can simply pass this.id to playpause() function. This way it will only work on the div that is clicked and not on others. By doing this, there is no need to group the elements that you have done in your code by giving the same css class to all div elements.
Hope this helps!
function playPause(id) {
var divId = document.getElementById(id);
if (divId.getAttribute('status') == 'paused') {
divId.setAttribute('status', 'play');
divId.play();
}
else{
divId.setAttribute('status', 'paused');
divId.pause();
}
}
.responsive {
padding: 0 6px;
width: 24.99999%;
margin-left: 20%;
}
#media only screen and (max-width: 1700px){
.responsive {
width: 49.99999%;
margin-left: 5%;
}
}
#media only screen and (max-width: 1200px){
.responsive {
width: 24.99999%;
margin-left: 2%;
}
}
div.video1 {
margin-left: 26%;
margin-bottom: 1%;
display: inline-block;
}
div.video2 {
margin-left: 26%;
margin-bottom: 1%;
display: inline-block;
}
div.video3 {
margin-left: 26%;
margin-bottom: 1%;
display: inline-block;
}
div.video4 {
margin-left: 26%;
margin-bottom: 1%;
display: inline-block;
}
div.video5 {
margin-left: 26%;
margin-bottom: 10%;
display: inline-block;
}
<div class="background">
<div class="transbox">
<hr>
<h2> Highlights </h2>
<hr>
<div class="responsive">
<div class="video1">
<video id="video1" class="videos video1" status="paused" width="500" height="303" onclick="playPause(this.id);">
<source src="hlace.mp4" type="video/mp4">
<source src="hlace.ogg" type="video/ogg">
</video>
</div>
</div>
<div class="responsive">
<div class="video2">
<video id="video2" class="videos video2" status="paused" width="500" height="300" onclick="playPause(this.id);">
<source src="hldustace.mp4" type="video/mp4">
<source src="hldustace.ogg" type="video/ogg">
</video>
</div>
</div>
<div class="responsive">
<div class="video3">
<video id="video3" class="videos video3" status="paused" width="500" height="300" onclick="playPause(this.id);">
<source src="hlflick.mp4" type="video/mp4">
<source src="hlflick.ogg" type="video/ogg">
</video>
</div>
</div>
<div class="responsive">
<div class="video4">
<video id="video4" class="videos video4" status="paused" width="500" height="300" onclick="playPause(this.id);">
<source src="hlmirage.mp4" type="video/mp4">
<source src="hlmirage.ogg" type="video/ogg">
</video>
</div>
</div>
<div class="responsive">
<div class="video5">
<video id="video5" class="videos video5" status="paused" width="500" height="300" onclick="playPause(this.id)">
<source src="hlreel.mp4" type="video/mp4">
<source src="hlreel.ogg" type="video/ogg">
</video>
</div>
</div>
</div>
</div>
Thanks

Having a div with buttons over a video

I have a video in my page and I would like to have a div with specific controls over the video instead of the regular ones.
I have tried setting the div to absolute but even though the buttons appear, they are not clickable.
Is there any way (without jquery) to do this where the buttons in the div are above the video and clickable?
Video:
<div id="divVideo" style="text-align:center">
<video id="video1" width="720" autoplay loop>
<source src="01_vid.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
Buttons (they have a small script):
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮&#9646</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
Script (probably unnecessary):
var myVideo = document.getElementById("video1");
function playPause(btn) {
if (myVideo.paused) {
myVideo.play();
btn.innerHTML = "▮&#9646"
} else {
myVideo.pause();
btn.innerHTML = "&#9658"
}
}
function muteUnmute(etc) {
if (myVideo.muted) {
myVideo.muted = false
etc.innerHTML = "Mute"
} else {
myVideo.muted = true;
etc.innerHTML = "Unmute"
}
}
function goHD(el) {
if (myVideo.width != 1280){
myVideo.width = 1280
el.innerHTML = "SD"
}
else{
myVideo.width = 720
el.innerHTML = "HD";
}
}
This is my CSS:
#botoes {
float: center;
position: absolute;
bottom: 0; z-index: 1;
width: 100%;
text-align: center;
margin-bottom: 10px;
}
#divVideo {
position: relative;
width: 720px;
float: left;
height: 405px;
}
#video {
position: relative;
width: 720px;
height: 405px;
background-color: blue;
float: left;
display: block;
}
How do I make the buttons float over the video (that is inside a div)?

I cannot add a realistic video here. So imagine the image to be a video.
.video {position: relative; width: 350px;}
.video img {display: block;}
.video .buttons {position: absolute; bottom: 0; z-index: 1; width: 100%; text-align: center;}
<div class="video">
<img src="http://placehold.it/350x150" />
<div class="buttons">
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮&#9646</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
</div>
</div>
If you wanna make it only appear once you hover your mouse over the video, there you go:
.video {position: relative; width: 350px;}
.video img {display: block;}
.video .buttons {position: absolute; bottom: 0; z-index: 1; width: 100%; text-align: center; display: none;}
.video:hover .buttons {display: block;}
<div class="video">
<img src="http://placehold.it/350x150" />
<div class="buttons">
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮&#9646</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
</div>
</div>

video {
width: 300px;
height: auto;
}
div {
background: rgba(255, 255, 255, .85);
height: 50px;
width: 500px;
position: relative;
top: -50px;
padding: 5px;
}
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div>
<button>Start</button>
<button>End</button>
</div>

Anchor not working in div

<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;
}

HTML5 video ignoring z-index

So this is what i tried so far:
<div id="video" style="position:absolute;margin-top: 231px;margin-left: 127px;">
<video width="520" height="390" style="z-index:-10;">
<source src="m/video.ogv" type="video/ogg">
<source src="m/video.mp4" type="video/mp4">
</video>
</div>
I have a fixed menu and when the menu is over the video , the video just seem to ignore the z-index. Im currently working on chrome windows with no luck. Any ideas?

Use css position:absolute property to both elements which overlaps and try to give values higher than 0 to the z-index
Here is working jsFiddle example.
css:
#main_container { float: left; position: relative; left:0; top:0; }
#video { position: absolute; left: 0px; top: 0px; min-height: 100%;
min-width: 100%; z-index: 9997; }​
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
z-index: 9998; }
html:
<div id="main_container">
<div id="overlay"></div>
<video id="video" width="" height="" controls="controls" loop="loop" autoplay="">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>
Note: Used overlay div for deactivate controls and you can use whatever content on your video, like in jsFiddle example.
Source: Video as background on a website playing on command

On your overlay/menu element, use:
backface-visibility: hidden;
This worked for me. My guess is that it triggers 3d rendering on the element, which eliminates the z-index problem.

The overlay also needs to be a sibling of the video.
It will not work if the video is a child of the overlay.
Works:
<div id="container">
<div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;">
</div><!-- end #overlay -->
<video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div><!-- end #container -->
Dosen't Work:
<div id="container">
<div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;">
<video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div><!-- end #overlay -->
</div><!-- end #container -->
I've only tried this in Chrome so apologies if this isn't universally true.