I have a django template that displays a list of objects with youtube videos:
{% for obj in objs %}
<h1>{{ obj.name }}</h1>
<iframe width="425" height="349" src="{{ obj.video}}" frameborder="0" allowfullscreen=""></iframe>
{% endfor %}
obj.video is stord as a urlField. When I load the page chrome console gives me the error refused to display document because display forbidden by x-frame-options.
The problem persists if I replace {{ obj.video }} with a manually written youtube embed url such as http://youtu.be/zzfQwXEqYaI. However, if I replace it with something like www.google.com the iframes will load.
Try embedding the video like with url like:
http://www.youtube.com/embed/zzfQwXEqYaI
I guess its some kind of protection from youtube
Related
I would like to embed a pptx that is uploaded into a folder in OneDrive within a iframe tag in a Django template. I have the urls stored in a model and saved into the SQLite database. In this sense, in the views.py file, I have the following code:
context = {
'selectedunit': selectedunit,
'url_to_be_inserted': MyModel.objects.filter(unit=selectedunit)
}
return render(request, 'web.html', context)
The code for web.html is very easy:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container col-lg-8">
<div class="center">
<iframe class="center" src={{ url_to_be_inserted.url }} width="100%" height="300%" frameborder="0"/>
</div>
</div>
{% endblock %}
The result is the snapshot below:
While, I would like to embed the ppt into the web site. If I directly insert the URL, instead of using the context variable, it works. That is to say:
<iframe class="center" src="https://..." width="100%" height="300%" frameborder="0"/>
In this case, the result is as follows (ppt embedded into the Web site):
The reason why doing in this sense is because, depending on the selectedunit variable, I would like to address a different pptx with a different URL and I would like to dynamically change the pointer (as you see above by filtering the model).
How could I solve it?
Many thanks in advance
How do I use an Iframe in Django. Currently its searching for the src url in my own files. How do I tell it to not look in my files but to look at the url?
Currently I'm storing the embed code minus the tag in a database and then trying to dynamically generate it in my template.
games.embed = 'allowtransparency="true" width="485" height="402" src="//scratch.mit.edu/projects/embed/82384372/?autostart=false" frameborder="0" allowfullscreen'
{% extends 'code_games/base.html' %}
{% block content %}
<div class="game">
{{games.title|linebreaks}}
<iframe '{{ games.embed }}'></iframe>
</div>
{% endblock %}
The iframe itself shows up on my page but the contents of it don't.
The request URL per the error:
Request URL: http://chacemcguyer.pythonanywhere.com/games/1/%22/scratch.mit.edu/projects/embed/82384372/?autostart=false%22
You can see that its searching for the url in my site. How do I get around that?
The error also says:
Using the URLconf defined in mysite.urls, Django tried these URL patterns, in this order:
Then it shows all of my urls from settings.py
I found a solution!
What I had to do was make sure that the iframe content which was coming from my database was |safe
I changed:
<iframe src='{{ games.embed }}'></iframe>
to
<iframe src='{{ games.embed|safe }}'></iframe>
I have created a DJANGO blog-engine which takes my post and the template parses it for html tags. links etc.. are working but it does not load image file and instead shows the 'alternative' . I have tried the tag in separate html files and it is otherwise. Just not displaying image from inside a django blog post.
Relevant portions of the template file :
{% include 'blog/header.html' %}
</aside>
<section id ="content">
<article>
{%for post in posts %}
<h2>{{ post.title }}</h2>
<h3>{{ post.created}}</h3>
<p>
{{ post.body|safe }}<br>
</p>
<h3>By {{ post.author }}</h3>
I am copy-pasting the post in question
<---- text here ------------------>
GDCM::Directory
<img src="/home/usman/www/deejay/blog/static/images/dicomdir.png" />
This is it
Interestingly, the 'a' tag works fine but the 'img' tag is not working. I have tried many variations but i want some inline code to display simple html tag, alternatively of course i will resort to it programmatically by passing some variable to the template from inside the post to let it know where to position the image.
Your problem is here: {{ post_get_absolute_url }}. You should use {{ post.get_absolute_url }}.
The better way is to call the URL of the image directly; that way you maintain your URLs in urls.py and not in your model code. It makes your app more portable.
Take your image field name value from your model, and then {{ post.image.url }}. For example, if your model is:
class Post(models.Model):
img = models.ImageField(upload_to='images')
Then you would use {{ post.img.url }}
Problem solved when I replaced the full address with
<img src="/static/images/dicomdir.png"/>
On development server as well as on production. What helped was that I looked at the Dev-server responses on my terminal and was able to figure out the url.
I'm currently attempting to embed a user-submitted YouTube link via a Django form within a Twitter Bootstrap layout.
The space for the video is appearing and the source code reflects the correct information and link, but neither the video nor the player appears. I'm also using the "flex-video" class from this link for a responsive layout http://poslavsky.com/blog/2012/04/01/responsive-video-in-twitter-bootstrap/ but it doesn't work when that class is changed to another name such as "video" either.
This is the code:
<div class="row">
<div class="span12">
<span>{{story.author}}</span><br>
<span>{{story.zip_code}}</span><br>
<span>{{story.date}}</span><br>
<p>{{story.copy}}</p>
<div class="image">
{% if story.pic %}
<img src="{{ story.pic.url }}" alt="some_image_alt_text" />
{% endif %}
</div>
<div class="flex-video">
{% if story.video %}
<p> <iframe width="460" height="250" src="{{ story.video}}" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</p>
{% endif %}
</div>
</div>
Any insight greatly appreciated.
I guess {{story.video}} gives Youtube video Url something similar to this http://youtube.com/watch?v=ASO_ypdnsQ which is direct youtube url, and not embed url.
Embed URL for same video is different than direct url, like this http://youtube.com/embed/....
I created a custom template tag, here is how.
import urlparse
...
#register.inclusion_tag('video_embed.html', takes_context=True)
def youtube_embed(context, url):
url_data = urlparse.urlparse(url)
query = urlparse.parse_qs(url_data.query)
video_id = query["v"][0]
context['embed_url'] = ('http://youtube.com/embed/%s' % video_id)
return context
Then, in templates just load the tag, and pass the youtube url. It will give embed url from normal url.
Let's say that someone has a link to an external image: www.externalsite.com/img/photo.jpg
Now, people can hotlink that image on my forum using [img] tags. A feature that is widely supported on almost every forum. Since hotlinking has some disadvantages I want to know how I can make a thumbnail of the image, based on the given url. Something Google does in Google images.
My website is powered by Django.
Use sorl.thumbnail
In your templates you would use
{% thumbnail "http://external.server/img/image.png" "200x200" "scale" as im %}
<img src="{{im.url}}" width="{{im.width}}" height="{{im.height}}">
{% endthumbnail %}
you can also load from any context varable
{% for image in post.images %}
{% thumbnail image.url "200x200" "scale" as im %}
<a href={{image.url}}>
<img src="{{im.url}}" width="{{im.width}}" height="{{im.height}}">
....