Hey everyone, I have a question regarding web development. I am quite new to this field and I'm facing an issue with getting videos to open with a fade-in and slide effect when a text link is clicked. I decided to use iframes instead of jQuery's slide function to ensure smooth animation. However, since I've never worked with iframes before, I'm encountering some unexpected behavior. When I click on a link, all the videos open up simultaneously. Has anyone experienced this before?
https://i.sstatic.net/XedTR.gif
Here is a snippet of my code (I've removed the text for clarity):
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="wrap">
<p id="text"> Lorem ipsum dolor...
<span id="link1">link 1</span>
<span id="wrap1">
<iframe id="frame" class="rect" src="iframe.html" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span>
....Lorem ipsum dolor...
<span id="link2">link 2</span>
<span id="wrap2">
<iframe id="frame2" class="rect" src="iframe2.html" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span>
....Lorem ipsum dolor sit amet...
</p>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
CSS:
#wrap{
margin: 100px auto;
width: 350px;
}
p{
line-height: 2em;
}
iframe {
border:0 none;
}
.rect{
float: left;
height: 0px;
width: 350px;
display: block;
margin: 0px;
padding: 0px;
opacity: 0;
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.open {
height: 200px;
width: 350px;
opacity: 1;
}
#link1{
color: red;
cursor: pointer;
}
#link2{
color: red;
cursor: pointer;
}
JavaScript:
$(document).ready(function(){
$("#link1").click(function(){
if ($( ".rect" ).hasClass( "open" )){
$(".rect").removeClass("open");
$("body").find("iframe").contents().find("#pasc").get(0).pause();
} else {
$(".rect").addClass("open");
$("body").find("iframe").contents().find("#vid1").get(0).play();
}
});
$("#link2").click(function(){
if ($( ".rect" ).hasClass( "open" )){
$(".rect").removeClass("open");
$("body").find("iframe").contents().find("#vid2").get(0).pause();
} else {
$(".rect").addClass("open");
$("body").find("iframe").contents().find("#vid2").get(0).play();
}
});
});
iframe1:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<video id="vid1" width="350" height="200" >
<source src="video1.mp4" type="video/mp4">
</video>
</body>
</html>
iframe2:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<video id="vid2" width="350" height="200" >
<source src="video2.mp4" type="video/mp4">
</video>
</body>
</html>