set the src attribute of an iframe, then load into page, using javascript
I'm currently working on a simple google chrome extension to play youtube
videos in a separate tab based on an omnibox query. For example, if a user
searches for "tupac", my extension redirects to
chrome-extension://{chrome-extension-id}/just-play-music.html?tupac.
Now I want to embed a youtube iframe player on this just-play-music.html
page, set to play a list of videos returned by a search on the string
"tupac". Following the Google API docs, this is achieved easily enough by
providing the following src url for my iframe:
http://www.youtube.com/embed?listType=search&list=QUERY where QUERY in
this case would be replaced by "tupac".
However, here is where I've reached a sticking point. I can't figure out
how to configure my .html and .js files so that this happens dynamically
when the page loads, based on the url of the page. Below is the code for
just-play-music.html and the .js file it is linked to.
Again, the goal here is to generate a youtube iframe with a src attribute
created by grabbing location.search (I realize this is an inelegant way of
doing this) when the page loads, and then insert this iframe into the
content section. Please let me know if you see something very wrong, this
is admittedly my first time working with javascript.
html
<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css">
<script src="main.js"></script>
</head>
<body>
<section class="header">
<h1>just play music:</h1>
</section>
<section id="movie" class="content">
</section>
</body>
</html>
javascript
function iframeDidLoad() {
alert("Done");
}
function loadIframe() {
var query = location.search;
var target =
"http://www.youtube.com/embed?listType=search&autoplay=1&list=" +
encodeURIComponent(query);
var frame = '<iframe id="ytplayer" type="text/html" width="640"
height="390" src="'+target+'" frameborder="0" />';
document.getElementById('movie').innerHTML = frame;
iframeDidLoad();
}
No comments:
Post a Comment