RainingEveryday RainingEveryday - 1 month ago 9
HTML Question

How do I automatically embed several different youtube videos based on user input? (Google App Engine)

I'm trying to embed youtube videos automatically using Youtube's iframe code that is classified under different genres. Users can enter a youtube share url which will be stored, and it should take the four most recent entries that fit the genre type and truncate the url, before parsing it into the iframe code in the html. Here is what I have so far:

For storing the input:

class suggestionndb(webapp2.RequestHandler):
def post(self):
suggestion = suggestions()
suggestion.link = self.request.get("suggestlink")
suggestion.genre = self.request.get("suggestgenre")
suggestion.date = datetime.datetime.now()
suggested = suggestion.put()`


For truncating and parsing the url to automatically embed:

class classicalpage(webapp2.RequestHandler):
def get(self):
user = users.get_current_user()
if user:
logout = users.create_logout_url(self.request.uri)
classical = suggestions.query(suggestions.genre == "classical").order(-suggestions.date)
classicallist = classical.fetch(4)
for i in classicallist:
link = i.link
embed = link[16:]
self.response.write(embed)
template_values = {"logouturl":logout, "link":embed}
template = JINJA_ENVIRONMENT.get_template("classical.html")
self.response.write(template.render(template_values))
else:
self.redirect("/")


And here is the HTML:

<div id="genrelist" name="genrelist">
<h2 id="genretitle">♪ Classical ♪</h2>
<iframe id="video1" name="classical1" width="480" height="360" src="https://www.youtube.com/embed/{{link}}" frameborder="0" allowfullscreen></iframe>
<iframe id="video2" name="classical2" width="480" height="360" src="https://www.youtube.com/embed/{{link}}" frameborder="0" allowfullscreen></iframe>
<iframe id="video3" name="classical3" width="480" height="360" src="https://www.youtube.com/embed/{{link}}" frameborder="0" allowfullscreen></iframe>
<iframe id="video4" name="classical4" width="480" height="360" src="https://www.youtube.com/embed/{{link}}" frameborder="0" allowfullscreen></iframe>
</div>


With this, all 4 videos are of the same youtube video... how do I go about making each video a different video based off the 4 most recent user inputs?

Answer

The problem is that you are using the same variable ({{link}}) in your template, and that variable only has the one value you assigned it. You could fix this in a few ways, but using an array is probably best.

You would change your context-building code to:

class classicalpage(webapp2.RequestHandler):
def get(self):
    user = users.get_current_user()
    if user:
        logout = users.create_logout_url(self.request.uri)
        classical = suggestions.query(suggestions.genre == "classical").order(-suggestions.date)
        classicallist = classical.fetch(4)
        template_values = {
            "logouturl": logout, 
            "links": [i.link[16:] for i in classicallist],
        }

        template = JINJA_ENVIRONMENT.get_template("classical.html")
        self.response.write(template.render(template_values))
    else:
        self.redirect("/")

Similarly, you can use a jinja for loop to render the iframes:

<div id="genrelist" name="genrelist">
    <h2 id="genretitle">♪ Classical ♪</h2>
    {% for link in links %}
        <iframe id="video{{loop.index}}" name="classical{{loop.index}}" width="480" height="360" src="https://www.youtube.com/embed/{{link}}" frameborder="0" allowfullscreen></iframe>
    {% endfor %}
</div>