I am trying to show some video files in an Iframe for our pany web site. Whenever the user clicks on a video link it will be shown inside an Iframe. I used a Javascript file to perform this action. If I host my videos on you tube, you tube show the title of video.But the javascript I used only change the content of the iframe. I need to show the title of the video files somewhere above the Iframe. The javascript file I use is this :

<script type="text/javascript">
function ChangeVideoUrl(url)
{
document.getElementById("video_iframe").src = url;
}
</script>

and in I wrote this :

<a class="links" href="JavaScript:ChangeVideoUrl('https://..something.');"> text</a>

Any Ideas?

I am trying to show some video files in an Iframe for our pany web site. Whenever the user clicks on a video link it will be shown inside an Iframe. I used a Javascript file to perform this action. If I host my videos on you tube, you tube show the title of video.But the javascript I used only change the content of the iframe. I need to show the title of the video files somewhere above the Iframe. The javascript file I use is this :

<script type="text/javascript">
function ChangeVideoUrl(url)
{
document.getElementById("video_iframe").src = url;
}
</script>

and in I wrote this :

<a class="links" href="JavaScript:ChangeVideoUrl('https://..something.');"> text</a>

Any Ideas?

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 14, 2014 at 17:40 Andrew 13.9k1414 gold badges6969 silver badges8585 bronze badges asked Jan 14, 2014 at 17:03 user3026373user3026373 6511 gold badge11 silver badge77 bronze badges 5

• 1 What do you mean by "title"? What is the html? – m59 Commented Jan 14, 2014 at 17:03
• 1 iframe does not have a title attribute. What is it that you're looking for? – Brian S Commented Jan 14, 2014 at 17:06
• 1 @BrianS Yes, it does, but it doesn't seem relevant... – m59 Commented Jan 14, 2014 at 17:07
• @m59, Sorry. You're technically correct, as title is a global attribute. But it's not going to do anything useful for an iframe – Brian S Commented Jan 14, 2014 at 17:10
• You still haven't mentioned what "title" you want to update... – m59 Commented Jan 14, 2014 at 17:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You can change the actual title of the iframe with iframeReference.contentDocument.title = 'some title'. If you want to change an html title like a h1 tag, you can get the reference to it and set its textContent. See below.

Sample Markup:

  <button id="myBtn">Change Iframe</button>
  <h1 id="h1Title">Iframe Title</h1>
  <iframe id="myIframe"></iframe>

Sample JavaScript:

var myBtn = document.getElementById('myBtn');
var myIframe = document.getElementById('myIframe');
var h1Title = document.getElementById('h1Title');

myBtn.addEventListener('click', changeIframe);

function changeIframe() {
  myIframe.contentDocument.title = 'New title!';
  h1Title.textContent = 'New Title!';
}

Live demo (click).

As you have now updated your question with your code, there is more to say.

First, inline js (JavaScript inside your html elements) is bad. Read some of these results: https://www.google./search?q=Why+is+inline+js+bad%3F

Instead, follow my example and get element references and attach event listeners to them. You can store your data on the element and pull it from there if you want to.

Live demo (click).

Markup:

<div class="links">
  <a data-src="a/video" data-title="A video!">Click to Play: A video!</a>
  <a data-src="some/title" data-title="Some Title!">Click to Play: Some Title!</a>
  <a data-src="another/title" data-title="Another Title!">Click to Play: Another Title!</a>
</div>
<h1 id="h1Title">Iframe Title</h1>
<iframe id="myIframe"></iframe>

JavaScript:

var myIframe = document.getElementById('myIframe');
var h1Title = document.getElementById('h1Title');
var links = document.querySelectorAll('.links a');

for (var i=0; i<links.length; ++i) {
  addClickFunc(links[i], i);
}

function addClickFunc(elem, i) {
  elem.addEventListener('click', function() {
    var title = elem.getAttribute('data-title');
    var src = elem.getAttribute('data-src');
    changeIframe(title, src);
  });  
}


function changeIframe(title, src) {
  myIframe.src = src;
  myIframe.contentDocument.title = title;
  h1Title.textContent = title;
}

Assuming some heading for title. You can do this also by javascript.

Give the id for the tag that holding the title of iframe. Using javascript change the text in that when user click's on video link(chnage innerHTML).