Images/video not loading

I don’t know what the story is here.
This is part of a python tut that I’m doing.
When I load the window it’s just blank, it should have 4 imported images.
If I go into the developers console it shows the images there if I scroll over the link (in elements), but when I look in console it says : Failed to load resource: the server responded with a status of 403 (Forbidden).
I’m using the same links as others.
If I paste the links directly into the address bar they work.
If someone can tell me how to copy a working file I will.

This post seems almost as useless as my script at the moment. Just don’t know where to start.

IMHO, a good start would be to post the code involved. A link to the tutorial?

I cant post the live code cos I can’t figure out how to copy it from the console (more frustration).
I know this isn’t a python forum but I’ll post the python part of my script that contains the links, just so people can see for themselves that they work in the address bar,
Heres the html/css

import webbrowser
import os
import re

# Styles and scripting for the page
main_page_head = '''
<head>
    <meta charset="utf-8">
    <title>Fresh Tomatoes!</title>

    <!-- Bootstrap 3 -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap
    /3.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap
    /3.1.0/css/bootstrap-theme.min.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap
    .min.js"></script>
    <style type="text/css" media="screen">
        body {
            padding-top: 80px;
        }
        #trailer .modal-dialog {
            margin-top: 200px;
            width: 640px;
            height: 480px;
        }
        .hanging-close {
            position: absolute;
            top: -12px;
            right: -12px;
            z-index: 9001;
        }
        #trailer-video {
            width: 100%;
            height: 100%;
        }
        .movie-tile {
            margin-bottom: 20px;
            padding-top: 20px;
        }
        .movie-tile:hover {
            background-color: #EEE;
            cursor: pointer;
        }
        .scale-media {
            padding-bottom: 56.25%;
            position: relative;
        }
        .scale-media iframe {
            border: none;
            height: 100%;
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            background-color: white;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        // Pause the video when the modal is closed
        $(document).on('click', '.hanging-close, .modal-backdrop, .modal'
        , function (event) {
            // Remove the src so the player itself gets removed, as this is the only
            // reliable way to ensure the video stops playing in IE
            $("#trailer-video-container").empty();
        });
        // Start playing the video whenever the trailer modal is opened
        $(document).on('click', '.movie-tile', function (event) {
            var trailerYouTubeId = $(this).attr('data-trailer-youtube-id')
            var sourceUrl = 'http://www.youtube.com/embed/' + trailerYouTubeId
            + '?autoplay=1&html5=1';
            $("#trailer-video-container").empty().append($("<iframe></iframe>", {
              'id': 'trailer-video',
              'type': 'text-html',
              'src': sourceUrl,
              'frameborder': 0
            }));
        });
        // Animate in the movies when the page loads
        $(document).ready(function () {
          $('.movie-tile').hide().first().show("fast", function showNext() {
            $(this).next("div").show("fast", showNext);
          });
        });
    </script>
</head>
'''

# The main page layout and title bar
main_page_content = '''
<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- Trailer Video Modal -->
    <div class="modal" id="trailer">
      <div class="modal-dialog">
        <div class="modal-content">
          <a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true">
            <img src="https://lh5.ggpht.com/v4-628SilF0HtHuHdu5EzxD7WRqOrrTIDi_MhEG6_qkNtUK5Wg7KPkofp
            _VJoF7RS2LhxwEFCO1ICHZlc-o_=s0#w=24&h=24"/>
          </a>
          <div class="scale-media" id="trailer-video-container">
          </div>
        </div>
      </div>
    </div>
    <!-- Main Page Content -->
    <div class="container">
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Fresh Tomatoes Movie Trailers</a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      {movie_tiles}
    </div>
  </body>
</html>
'''

# A single movie entry html template
movie_tile_content = '''
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id=
"{trailer_youtube_id}" data-toggle="modal" data-target="#trailer">
    <img src="{poster_image_url}" width="220" height="342">
    <h2>{movie_title}</h2>
</div>
'''


def create_movie_tiles_content(movies):
    # The HTML content for this section of the page
    content = ''
    for movie in movies:
        # Extract the youtube ID from the url
        youtube_id_match = re.search(r'(?<=v=)[^&#]+', movie.trailer_youtube_url)
        youtube_id_match = youtube_id_match or re.search(r'(?<=be/)[^&#]+', movie.trailer_youtube_url)
        trailer_youtube_id = (youtube_id_match.group(0) if youtube_id_match else None)

        # Append the tile for the movie with its content filled in
        content += movie_tile_content.format(
            movie_title = movie.title,
            poster_image_url = movie.poster_image_url,
            trailer_youtube_id = trailer_youtube_id
        )
    return content


def open_movies_page(movies):
    # Create or overwrite the output file
    output_file = open('fresh_tomatoes.html', 'w')

    #Replace the placeholder for the movie tiles with the actual dynamically generated content
    rendered_content = main_page_content.format(movie_tiles = create_movie_tiles_content(movies))

    # Output the file
    output_file.write(main_page_head + rendered_content)
    output_file.close()

    # open the output file in the browser
    url = os.path.abspath(output_file.name)
    webbrowser.open('file://' + url, new=2)     # open in a new tab, if possible

And the python :

import fresh_tomatoes
import media

toy_story = media.Movie("Toy Story"
                        ,"A story of a boy and his toys that come to life"
                        ,"https://upload.wikimedia.org/wikipedia/en/1/13/Toy_Story.jpg",
                        "https://www.youtube.com/watch?v=4KPTXpQehio")

avatar = media.Movie("Avatar",
                     "A marine on an alien planet"
                     ,"http://upload.wikimedia.org/wikipedia/id/b/b0/Avatar-Teaser-Poster.jpg",
		      "https://www.youtube.com/watch?v=dCPcoNo_OkM")
###These below (commented out) work when uncommented
###print(toy_story.title)
###print(toy_story.storyline)
###toy_story.show_trailer()

vanishing_point = media.Movie("Vanishing Point",
                              "American action road movie",
			      "https://upload.wikimedia.org/wikipedia/en/1/12/Vanishingpointmovieposter.jpg",
			      "https://www.youtube.com/watch?v=xNTWixbq0Oc")

school_of_rock = media.Movie("School of Rock",
                             "American idiot movie",
			     "https://upload.wikimedia.org/wikipedia/en/1/11/School_of_Rock_Poster.jpg",
			     "https://www.youtube.com/watch?v=3PSujebc74")


movies = [toy_story,avatar,vanishing_point,school_of_rock]					 
fresh_tomatoes.open_movies_page(movies)					 

I’ve somehow resolved that but lost all the layout.

The tutorial is a video series and only covers python.
It looks like bootstraps is blocking things (the 403) and stopping the video from starting up immediately (that would mean that parts fine), is that possible ??

I finally figured out how to post live code. I have images, just the format is lost. Should have 3 images side by side. I have them stacked. When video loads it should load over everything and in middle of window, its loading above everything at the moment.



<head>
    <meta charset="utf-8">
    <title>Fresh Tomatoes!</title>

    <!-- Bootstrap 3 -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap
    /3.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap
    /3.1.0/css/bootstrap-theme.min.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap
    .min.js"></script>
    <style type="text/css" media="screen">
        body {
            padding-top: 80px;
        }
        #trailer .modal-dialog {
            margin-top: 200px;
            width: 640px;
            height: 480px;
        }
        .hanging-close {
            position: absolute;
            top: -12px;
            right: -12px;
            z-index: 9001;
        }
        #trailer-video {
            width: 100%;
            height: 100%;
        }
        .movie-tile {
            margin-bottom: 20px;
            padding-top: 20px;
        }
        .movie-tile:hover {
            background-color: #EEE;
            cursor: pointer;
        }
        .scale-media {
            padding-bottom: 56.25%;
            position: relative;
        }
        .scale-media iframe {
            border: none;
            height: 100%;
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            background-color: white;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        // Pause the video when the modal is closed
        $(document).on('click', '.hanging-close, .modal-backdrop, .modal'
        , function (event) {
            // Remove the src so the player itself gets removed, as this is the only
            // reliable way to ensure the video stops playing in IE
            $("#trailer-video-container").empty();
        });
        // Start playing the video whenever the trailer modal is opened
        $(document).on('click', '.movie-tile', function (event) {
            var trailerYouTubeId = $(this).attr('data-trailer-youtube-id')
            var sourceUrl = 'http://www.youtube.com/embed/' + trailerYouTubeId
            + '?autoplay=1&html5=1';
            $("#trailer-video-container").empty().append($("<iframe></iframe>", {
              'id': 'trailer-video',
              'type': 'text-html',
              'src': sourceUrl,
              'frameborder': 0
            }));
        });
        // Animate in the movies when the page loads
        $(document).ready(function () {
          $('.movie-tile').hide().first().show("fast", function showNext() {
            $(this).next("div").show("fast", showNext);
          });
        });
    </script>
</head>

<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- Trailer Video Modal -->
    <div class="modal" id="trailer">
      <div class="modal-dialog">
        <div class="modal-content">
          <a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true">
            <img src="https://lh5.ggpht.com/v4-628SilF0HtHuHdu5EzxD7WRqOrrTIDi_MhEG6_qkNtUK5Wg7KPkofp
            _VJoF7RS2LhxwEFCO1ICHZlc-o_=s0#w=24&h=24"/>
          </a>
          <div class="scale-media" id="trailer-video-container">
          </div>
        </div>
      </div>
    </div>
    <!-- Main Page Content -->
    <div class="container">
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Fresh Tomatoes Movie Trailers</a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id=
"4KPTXpQehio" data-toggle="modal" data-target="#trailer">
    <img src="https://upload.wikimedia.org/wikipedia/en/1/13/Toy_Story.jpg" width="220" height="342">
    <h2>Toy Story</h2>
</div>

<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id=
"dCPcoNo_OkM" data-toggle="modal" data-target="#trailer">
    <img src="http://upload.wikimedia.org/wikipedia/id/b/b0/Avatar-Teaser-Poster.jpg" width="220" height="342">
    <h2>Avatar</h2>
</div>

<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id=
"xNTWixbq0Oc" data-toggle="modal" data-target="#trailer">
    <img src="https://upload.wikimedia.org/wikipedia/en/1/12/Vanishingpointmovieposter.jpg" width="220" height="342">
    <h2>Vanishing Point</h2>
</div>

<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id=
"3PSujebc74" data-toggle="modal" data-target="#trailer">
    <img src="https://upload.wikimedia.org/wikipedia/en/1/11/School_of_Rock_Poster.jpg" width="220" height="342">
    <h2>School of Rock</h2>
</div>

    </div>
  </body>
</html>

I really would like to know what tutorial you are working with.

Until then, I’ll do my best to guess. Please correct me if any of this is incorrect or incomplete.

  • all files are on the same server
  • there is a python file that returns image data -or- outputs HTML with the data placed into it
  • the HTML file (which if is as posted has the <head> incorrectly outside of the <html> section where it belongs) has jQuery code
  • the jQuery somehow gets the image data from the Python file and puts it into the HTML -or- manipulates what is already there
  • somewhere in the process there is a permission problem

I cant give you a link to the beginning of the tutorial, it seems cookies stop me from going over the tut several times.
Heres the only link I can supply:
https://classroom.udacity.com/courses/ud036/lessons/993460168/concepts/10157286210923

There are only 3 files in total, here’s the 2 python files (1 supplied earlier)
entertainment_center:

import fresh_tomatoes
import media

toy_story = media.Movie("Toy Story"
                        ,"A story of a boy and his toys that come to life"
                        ,"https://upload.wikimedia.org/wikipedia/en/1/13/Toy_Story.jpg",
                        "https://www.youtube.com/watch?v=4KPTXpQehio")

avatar = media.Movie("Avatar",
                     "A marine on an alien planet"
                     ,"http://upload.wikimedia.org/wikipedia/id/b/b0/Avatar-Teaser-Poster.jpg",
		      "https://www.youtube.com/watch?v=dCPcoNo_OkM")
###print(toy_story.title)
###print(toy_story.storyline)
###print(toy_story.poster_image_url)
###toy_story.show_trailer()

vanishing_point = media.Movie("Vanishing Point",
                              "American action road movie",
			      "https://upload.wikimedia.org/wikipedia/en/1/12/Vanishingpointmovieposter.jpg",
			      "https://www.youtube.com/watch?v=xNTWixbq0Oc")

school_of_rock = media.Movie("School of Rock",
                             "American idiot movie",
			     "https://upload.wikimedia.org/wikipedia/en/1/11/School_of_Rock_Poster.jpg",
			     "https://www.youtube.com/watch?v=3PSujebc74")


movies = [toy_story,avatar,vanishing_point,school_of_rock]					 
fresh_tomatoes.open_movies_page(movies)					 

This is called media.py:

import webbrowser

class Movie():
    def __init__(self, movie_title, movie_storyline, poster_image, trailer_youtube):
        self.title = movie_title
        self.storyline = movie_storyline
        self.poster_image_url = poster_image
        self.trailer_youtube_url = trailer_youtube
	
    def show_trailer(self):
        webbrowser.open(self.trailer_youtube_url)

Third file not live.
fresh_tomatoes.py:

import webbrowser
import os
import re

# Styles and scripting for the page
main_page_head = '''
<head>
    <meta charset="utf-8">
    <title>Video Candy</title>

    <!-- Bootstrap 3 -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap
    /3.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap
    /3.1.0/css/bootstrap-theme.min.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap
    .min.js"></script>
    <style type="text/css" media="screen">
        body {
            padding-top: 80px;
        }
        #trailer .modal-dialog {
            margin-top: 200px;
            width: 640px;
            height: 480px;
        }
        .hanging-close {
            position: absolute;
            top: -12px;
            right: -12px;
            z-index: 9001;
        }
        #trailer-video {
            width: 100%;
            height: 100%;
        }
        .movie-tile {
            margin-bottom: 20px;
            padding-top: 20px;
        }
        .movie-tile:hover {
            background-color: #EEE;
            cursor: pointer;
        }
        .scale-media {
            padding-bottom: 56.25%;
            position: relative;
        }
        .scale-media iframe {
            border: none;
            height: 100%;
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            background-color: white;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        // Pause the video when the modal is closed
        $(document).on('click', '.hanging-close, .modal-backdrop, .modal'
        , function (event) {
            // Remove the src so the player itself gets removed, as this is the only
            // reliable way to ensure the video stops playing in IE
            $("#trailer-video-container").empty();
        });
        // Start playing the video whenever the trailer modal is opened
        $(document).on('click', '.movie-tile', function (event) {
            var trailerYouTubeId = $(this).attr('data-trailer-youtube-id')
            var sourceUrl = 'http://www.youtube.com/embed/' + trailerYouTubeId
            + '?autoplay=1&html5=1';
            $("#trailer-video-container").empty().append($("<iframe></iframe>", {
              'id': 'trailer-video',
              'type': 'text-html',
              'src': sourceUrl,
              'frameborder': 0
            }));
        });
        // Animate in the movies when the page loads
        $(document).ready(function () {
          $('.movie-tile').hide().first().show("fast", function showNext() {
            $(this).next("div").show("fast", showNext);
          });
        });
    </script>
</head>
'''

# The main page layout and title bar
main_page_content = '''
<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- Trailer Video Modal -->
    <div class="modal" id="trailer">
      <div class="modal-dialog">
        <div class="modal-content">
          <a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true">
            <img src="https://lh5.ggpht.com/v4-628SilF0HtHuHdu5EzxD7WRqOrrTIDi_MhEG6_qkNtUK5Wg7KPkofp
            _VJoF7RS2LhxwEFCO1ICHZlc-o_=s0#w=24&h=24"/>
          </a>
          <div class="scale-media" id="trailer-video-container">
          </div>
        </div>
      </div>
    </div>
    <!-- Main Page Content -->
    <div class="container">
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">XX</a>           //Fresh Tomatoes Movie Trailers
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      {movie_tiles}
    </div>
  </body>
</html>
'''

# A single movie entry html template
movie_tile_content = '''
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id=
"{trailer_youtube_id}" data-toggle="modal" data-target="#trailer">
    <img src="{poster_image_url}" width="220" height="342">
    <h2>{movie_title}</h2>
</div>
'''


def create_movie_tiles_content(movies):
    # The HTML content for this section of the page
    content = ''
    for movie in movies:
        # Extract the youtube ID from the url
        youtube_id_match = re.search(r'(?<=v=)[^&#]+', movie.trailer_youtube_url)
        youtube_id_match = youtube_id_match or re.search(r'(?<=be/)[^&#]+', movie.trailer_youtube_url)
        trailer_youtube_id = (youtube_id_match.group(0) if youtube_id_match else None)

        # Append the tile for the movie with its content filled in
        content += movie_tile_content.format(
            movie_title = movie.title,
            poster_image_url = movie.poster_image_url,
            trailer_youtube_id = trailer_youtube_id
        )
    return content


def open_movies_page(movies):
    # Create or overwrite the output file
    output_file = open('fresh_tomatoes.html', 'w')

    #Replace the placeholder for the movie tiles with the actual dynamically generated content
    rendered_content = main_page_content.format(movie_tiles = create_movie_tiles_content(movies))

    # Output the file
    output_file.write(main_page_head + rendered_content)
    output_file.close()

    # open the output file in the browser
    url = os.path.abspath(output_file.name)
    webbrowser.open('file://' + url, new=2)     # open in a new tab, if possible

Thanks, unfortunately I don’t have a Udacity account so I can’t access the tutorial. But I’d be surprised if they didn’t keep their tutorials up-to-date.

I did find

and this image was found

But the youtube links for Avatar and School of Rock don’t seem to be correct.

https://www.youtube.com/watch?v=dCPcoNo_OkM
https://www.youtube.com/watch?v=3PSujebc74

Try changing
movies = [toy_story,avatar,vanishing_point,school_of_rock]
to
movies = [toy_story,vanishing_point]

ps. if you get any error messages in your browsers dev tools console, please post them.

It was a free tutorial. And thank you for helping out, it finally works as it was intended.
I think I’ll just keep to their free tutorials. I wouldn’t pay some internet site for lessons when none of their tutorials have worked yet, and there’s no help on their own forum unless its from others trying to figure out their own problems. Blind leading the blind over there. That script you gave me the update for, I only downloaded it 3 nights ago. So even the links on the tuts point to scripts they know are broken, and theres no warning/notice. I search for hours on their forum trying to find some-one else with my problem and answer.

As these tuts are meant to be a teaser to sign up I would have thought they would be up to date.

Again thanks Mitteneague
BTW, Avatar link was Outlaw Josey Wales, I couldn’t help myself

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.