I am working on this code from the last 2 days. I tried many solutions but i am not able to achieve what i want.
this is my code
<html>
<body>
Click me!
Click me!
<div id="0HTo_ySoct4">The text will get loaded here</div>
<div id="PxWDfisVmzg">The text will get loaded here</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
function myLink(Yt) {
var yout = Yt;
var myurl = '<iframe src="https://www.youtube.com/embed/' + yout + '?autoplay=1&rel=0&controls=1" width="450" height="300" frameborder="0" class="player"></iframe>';
$('.player').hide();
$("#"+yout).html(myurl);
}
</script>
</body>
</html>
Let me explain what i want and what the code is doing.
See, i have 2 click me tab. i can have more click me tab around 20, well it depends on the results.
All tab contains a youtube video id.
so when i click on any click me tab to play the video. The video will get loaded in their related div. This is indeed. i want to load each video just below their particular video description / details. Its working but with a bug.
The bug is, when i tried to click on the 2nd click me tab. The first one will get hide from the webpage but the video will still play in the background and you will listen audio of both video's.
I want to completely close the previous video before playing the next one.
I did many changes but did not get it fixed so now i need little help from you expert guys.
please help me.
How can i completely close all the last videos before playing the next one ?
Just because div id is different i am having this issue but i need that in my project.
Thanks in advance,
Do something like this
<html>
<body>
Click me!
Click me!
<div class="youtubeVideo" id="0HTo_ySoct4">The text will get loaded here</div>
<div class="youtubeVideo" id="PxWDfisVmzg">The text will get loaded here</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
function myLink(Yt) {
var yout = Yt;
var myurl = '<iframe src="https://www.youtube.com/embed/' + yout + '?autoplay=1&rel=0&controls=1" width="450" height="300" frameborder="0" class="player"></iframe>';
$('.player').hide();
$(".youtubeVideo").empty();
$("#"+yout).html(myurl);
}
</script>
</body>
</html>
basically empty all the divs showing the video before loading the new one in its corresponding div
Related
I'm buildin a webserver for an embedded system.
The main page must embed another html file, whose address in created with javascript.
the javascript is the following
<body class="mainPage" onload="getTerminalUrl()"> <br>
<script>
function getTerminalUrl() {
var terminalUrl = "embedded.html"
document.getElementById("embeddedTerm").setAttribute("src", terminalUrl);
document.getElementById("linkedTerm").setAttribute("action", terminalUrl);
}
</script>
and it creates a link to embedded.html (just for this example), in two spots
a button:
<form id="linkedTerm" action="">
and an embedded form
<embed id="embeddedTerm" src="" style="width: 100%;">
The embedded page is like this
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>Heading</h1>
<p>paragraph</p>
</body>
</html>
What happens is that, by using Firefox, i get the expected result
With Chrome i get the embedded page only when i open the inspector or resize the window
Do i Have to force a redraw or something to have the embedded page displayed consistently?
If instead of the Javascript i hardcode the URL everything works.
Thanks,
Marco
#CBroe posted the correct answer.
using iframe
<iframe id="embeddedTerm" src="" style="width: 100%;">
as well as forcing a refresh with
var element = document.getElementById("embeddedTerm");
element.style.display = 'none';
element.style.display = 'block';
Thanks a lot
I am building a video FAQ page for my website.
My objective is to have an embedded Youtube video at the top of the page with a list of questions underneath it. When a user clicks on a specific question, I'd like the page to refresh and display the video that corresponds with that question shown in the place where I have the youtube embedded at the top of the page.
Has anyone done this before and have any suggestions on how to make this happen?
You can code it in this way
<!DOCTYPE html>
<html>
<body>
<iframe id="youtube" width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
<h2>something</h2>
<p onclick=qus1()>Question 1</p>
<p onclick=qus2()>Question 2</p>
<script>
function qus1(){
document.getElementById('youtube').src="https://www.youtube.com/embed/GibiNy4d4gc?autoplay=1";
}
function qus2(){
document.getElementById('youtube').src ="https://www.youtube.com/embed/o6Jo2hW6gHI?autoplay=1";
}
</script>
</body>
</html>
Suppose I have a page named a.html and a picture x.
Now, when users go to a.html, I want to show the picture x for 3/4s then I want to show the page content.
Can anyone help me to do this?
Here is a small code that will use pure js to show a image prior to showing the content of the site. I think this is similar to what people use to show a loading image before loading the content.
<html>
<head>
<title>Image before loading content</title>
</head>
<body onload="show();">
<div id = "myDiv">
<img id = "myImage" src = "http://jimpunk.net/Loading/wp-content/uploads/loading45.gif">
</div>
<div id="content" style="display: none;">
This is a CONTENT SECTION Put your content here
</div>
<script type = "text/javascript">
function show() {
document.getElementById("myDiv").style.display="block";
setTimeout("hide()", 5000); // 5 wait, change the delay here
}
function hide() {
document.getElementById("myDiv").style.display="none";
document.getElementById("content").style.display="block";
}
</script>
</body>
This yo can put in a HTML page and you shold be able to see where i made the image and where the delay time will be happening.
Here is a working example using the above code: https://jsbin.com/pixemiwubu/edit?html,output
I'm sure this is pretty basic, but I can't seem to get any of the solutions I've found to work for me. Basically, I need to get the contents of a div from an iframe, and write them to a div in the parent page. This is what I have:
<iframe src="slideshows/slideshow/case2.html" frameborder=0 scrolling="no"
id="frame1" name="frame1"></iframe>
<div id="caption">
<script type="text/javascript">
var caption = frame1.document.getElementById('slidecaption');
document.write(caption);
</script>
</div>
'slidecaption' is the name of Id in the iframe that I'm trying to grab.
All I get is "null". Is it because the iframe contents haven't loaded yet? If so, how do I delay until the iframe has loaded?
Thanks,
Scott
Thanks to both of you for your help. I figured it out, based on Márcio's idea:
I put the function in the parent page:
<script type="text/javascript">
function send() {
document.getElementById('slidecaption').innerHTML =
frame1.document.getElementById('slidecaption').innerHTML}
</script>
And I put the call in the iframe document:
<body onload="parent.send();">
Regards,
Scott
I'm not sure this is the only thing you need to do, but you certainly need to retrieve frame1 from the dom.
<script type="text/javascript">
var frame1 = document.getElementById('frame1');
var caption = frame1.contentWindow.document.getElementById('slidecaption');
document.write(caption);
</script>
I have a code like this
<script type="text/javascript" src="http://www.clipul.com/play/swfobject.js"></script>
<div id="player">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('http://montsmile.com/jwplayer/player.swf','mpl','480','380','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('height','310');
so.addVariable('width','470');
so.addVariable('file','http://localhost:81/newtip/<?=$videopath1?>');
so.addVariable('logo','http://localhost:81/newtip/ffmpeg/logo2.jpg');
so.addVariable("ClickURL", "http://www.google.com");
so.addVariable('captions','/upload/corrie.xml');
so.addVariable('link','<?=$full_url.'tip.php?vid='.$row_video['vid']?>');
so.addVariable('linkfromdisplay','true');
so.addVariable('linktarget','_blank');
so.addVariable('searchbar','false');
so.addVariable('skin','http://montsmile.com/jwplayer/player.swf');
so.write('player');
</script>
It is displaying a player and playing the video. If I Click on the Logo It has to go to www.google.com. But when I click on the logo it becomes pause.
Help me how to add clickable Logo on the player
Simply add the following line to your embed code:
so.addVariable('logo.link','http://www.google.com/');
Best,
Zach
Developer, LongTail Video