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>
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 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
I have a website where all the navigation happens inside of an iframe. all the pages are locally stored on the server.
a reduced version of the html code is:
>> index.php
<html>
<head>
</head>
<body>
<table><tr><td>
<iframe src="link.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
<td>
<img src="pic.jpg">
</body>
</html>
Note the img is inside the main page. However, I want this image to change based upon what link is navigated to inside the iframe.
Right now I am using php GET to determine what page has been navigated to, but that is not a great solution because all the user has to do is tinker with the link and the desired image disappears.
eg:
<?
$locate = $_GET['locate'];
?>
<html>
<head>
</head>
<body>
<table><tr><td>
<? { if ($locate =="link") {
echo '<iframe src="link.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
<td>
<img src="pic.jpg">';
}
?>
</body>
</html>
The link inside the iframe page is:
http://example.com/index.php?locate=link
What I would like to do is somehow have the parent page holding the iframe to recognize what page is inside of the iframe and make the display of the image contingent on that instead of the hack above. I think that would be a more reliable way and not subject to the user manipulating the link.
As an aside, if there is a way to GET 'locate' in the link w/o the link showing in the address bar, that might be a compromise. But as far as I know, that can't be done.
====
EDIT
I found this:
document.getElementById("iframe_id").contentWindow.location.href
But I am not sure how to implement it.
I tried
<script>document.write(document.getElementById("vframe").contentWindow.location.href );</script>
in the body and the head ...
but the iframe link is not displayed
i tried this:
<html>
<head>
<script>
function getLink()
{
var x=document.getElementById("vframe").contentWindow.location.href;
}
</script>
</head>
<body>
<iframe src="start.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
</body>
</html>
But if it is supposed to work, i can't figure out how to 'read' the result of var x ...
i tried this:
<html>
<head>
</head>
<body>
<iframe src="start.php" width=599 height=350 frameborder=0 scrolling=no id="vframe"></iframe>
<script>document.write(document.getElementById("vframe").contentWindow.location.href);</script>
</body>
</html>
but the result is "about:blank". If I place it in the head or above the iframe there is no result ...
I have a forum which is generated by my CMS. I have no control over this code. Within this code I need to insert HTML. I have read other post similar to this one but those all involve using <textarea> on forms. My code is a bit different.
Here is the generated code:
<iframe id="re_contentIframe">
<html>
<body>
</body>
</html>
</iframe>
As a person types it automatically inserts the code into the <body> tag.
IE:
<iframe id="re_contentIframe">
<html>
<body>
<p>As a person types it adds the <p> tags.</p>
</body>
</html>
</iframe>
I have a function that inserts HTML dynamically when a person performs an action such as uploading a file. Currently that function appends the dynamic content before the closing <body> tag. What I want it to do is insert the HTML where the cursor last was within the the iFrame's body tag.
Here is a visual example:
<iframe id="re_contentIframe">
<html>
<body>
<p>Forum content is typed here.</p>
<p>Content.</p>
<p>Content.</p>
<p><!-- Last place the cursor was located is here! --></p>
<p>More forum content.</p>
</body>
</html>
</iframe>
In looking at the above code I want the HTML inserted exactly at the location the cursor was. In this example it was the second to last <p> tag BUT this won't always be the same exact place.
Is it possible to do this and how?
In other words:
[Find Cursor Position] function() {
//My code to insert HTML
});
EDIT
My CMS generates the code for the forum post. When rendered it appears as this:
The part that has my name in it is the area I can edit and type in. The area I can type is generated by my CMS and looks like this:
<iframe id="re_contentIframe">
<html>
<body>
Lynda =>
</body>
</html>
</iframe>
As I type the HTML changes to this:
<iframe id="re_contentIframe">
<html>
<body>
<p>What I type is wrapped in <p> tags by the forum code.</p>
<p>New Paragraph and so on...</p>
Lynda =>
</body>
</html>
</iframe>
What I need to do is at the very last place the cursor was located in the body of this iFrame I need to insert code upon an action that is triggered by a JS function.
I am trying to get the first paragraph from the website below and display it in an iframe.
Can you correct my code?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var iframe = document.getElementById('iframe');
$(iframe).contents().find("<p>").html();
</script>
</head>
<body>
<iframe name="iframe" id="iframe" src="https://www.baronaonlinepoker.com/blog" scrolling="yes" width="180" height="135">
</iframe>
</body>
</html>
You'd be better to use a DIV and use XMLHTTPRequest to set the innerHTML
If the browser loads a page from x.com, that page can have a frame whose source is y.com, but the x.com code will not have access to the y.com DOM. This is a cross-domain issue. You can read more here: http://en.wikipedia.org/wiki/Same-origin_policy
Please see my answer here: https://stackoverflow.com/a/19100553/98706
because I think your going about achieving something the wrong way.