I am trying to dispaly video in my html page by passing url as dict to template in django view named as succes
def success(request):
url_video="/media/video1.mp4"
return render(request,"payment/success.html",{"url_video":url_video})
my template code is all clear it has no errors
i am getting this error on command prompt
Not Found: /succes/media/video1.mp4
I don't understand why i get success/ in front of url i have passed.The video file is in media/video1.mp4 location but it is not getting displayed.let me know any changes i need to make.thanks
EDIT:
TEMPLATE:
<!DOCTYPE html>
<html>
<head>
<style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; }
</style>
</head>
<meta name="viewport" content="width=device-width">
<body>
<h1 id="myHeader">"{{ url_video}}"</h1> <br>
<video width=""height=""controls>
<source src="{{ url_video}}" type="video/mp4">
</video>
</body>
</html>
Sounds like a relative path problem. Make sure you have:
url_video="/media/video1.mp4"
and not
url_video="media/video1.mp4"
Without the leading slash, it will try to find in directory of current url
Related
I'm just learning how to use Django and HTML, and I encountered such a problem that my image is not displayed on the button, I don't understand what the error is and I will be grateful if someone can help me fix it
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title></title>
<style>
button {
background-image: url("/main/static/main/img/i.jpg");
padding-left: 32px;
padding-top: 10px;
padding-bottom: 10px;
background-repeat: no-repeat;
width: 320px;
height: 320px;
}
</style>
</head>
<body>
<button></button>
</body>
</html>
<button>
<img src=path />
</button>
would be easy solution? It depends how do you want it to be displayed. As button and inside a image or just image which can be clicked on?
Your image path must exists somewhere where it can pull it from.
EDIT: If you have Firefox Web Browser you can probably see in console (by pressing F12 on keyboard) what's the error message help you identify the source of the problem. I tried your code with another path to image and it works just the image is not centered vertically nor horizontally
I'm starting learning flask and I'm planning on makin a sorting algorithm visualizer using flask and I'm tryin to represent the elements of the array as bars (the height of the bars is = to the value of each element in the array). I'm thinking to use the display: block but it does not appear on the page. Pls help me or suggest anything if this is possible
html file:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="{{ url_for('static', filename='design.css') }}">
</head>
<body>
<div class="bar">
<p>test</p>
</div>
</body>
</html>
css file:
.bar{
display: inline-block;
height: 120px;
width: 5px;
background-color: red;
color: white;
}
this what only shows on my page. other css property works well this display: bar was the only problem
Normally this is an issue with browser caching. If you did not use a file and added it directly to <head> it should work
<head>
<style>
.bar{
display: inline-block; /*You want block or inline-block?*/
height: 120px;
width: 5px;
background-color: red;
color: white;
}
</style>
</head>
If you really want to use the css file, use versioning in the url:
/static/design.css/?v=1 next time /static/design.css/?v=2
But it becomes tedious. You can add a random variable like this:
import uuid
v = str(uuid.uuid4())
# url_for('static', filename='design.css', v=v)
Please clarify your answer using a screenshot of what is happening now
I'm using flask framework, to make some website but when i try to write css style it apply only for body tag and ignores all next
index.html content
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename = 'css/style.css')}}">
</head>
<body>
<h2>some text</h2>
</body>
</html>
style.css content
body {
background: #222;
}
h2 {
color: #fff;
}
when i check website source i see this
body {
background: #222;
}
hi guys I am using html but when i add the folowing <meta> element in the head , the Viewport wont change on the phone and chrome device mode:
<!DOCTYPE html>
<html>
<head>
<title>phone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-image: url('space.jpg')">
<img src="https://www.drgoulu.com/wp-content/uploads/HLIC/c2281c83670e31d8aaab7cb642b824db.png">
<p>Python est un langage de programmation objet, multi-paradigme et multiplateformes. Il favorise la programmation impérative structurée, fonctionnelle et orientée objet. Wikipédia</p>
</body>
</html>
Does anyone know what might be causing this?
try to put width: 100% in img tag
# style.css
img {
max-width: 100%;
# or simple width
# width: 100%;
}
or direct in img tag
<img style="width: 100%" src="https://www.drgoulu.com/wp-content/uploads/HLIC/c2281c83670e31d8aaab7cb642b824db.png">
I'm trying to load an image to my page and set it as my background, below is the css and html that I am working with. The CSS page seems to load, as my test font and background colors show up but for whatever reason my background image doesn't.
I am using Django as my web framework.
Appreciate the help!
HTML:
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="{% static 'personal/css/frontpagebackground.css' %}" type = "text/css"/>
</head>
<body>
<p>This is a test</p>
</body>
</html>
CSS:
body
{
background-image:url(personal/static/personal/img/home.jpg) no-repeat;
background-repeat:no-repeat;
background-size:100%;
background-color: green;
min-height: 100%;
}
p {
font-style: italic;
color: red;
}
You used background-image, so the no-repeat is not actually working. Try adding the no-repeat below as background-repeat: no-repeat;.
background-image: url('image-url-here.png');
background-repeat: no-repeat;
I've had problems like this with django, primarily because my {% static %} location was confusing me. I think this is a non-css issue, and a path issue.
It helped me to use the dev console to check for Resource Failed To Load error. It will spit out the path that the machine is looking for, and it's likely different than what you specified.
I.e. is your css file located along
personal/static/personal/img/home.jpg
relative to your css file? You might just need to back up a directory, i.e.
../personal/static/personal/img/home.jpg
Either way, the console should give you your path, and use that to determine where your CSS file is digging for the image.
If your CSS files are in a path such as /static/css/style.css
and the images are under a path such as /static/images/test.jpg
then you have to place the test.jpg image directly in the folder with the style.css i.e. /static/css/test.jpg and in your HTML file give it the name test.jpg without using the static path i.e. background-image:url('test.jpg');:)