Unable to open page linked via URL on Python file


I am trying t figure out why a URL link on my python file does not open the page when you click on the rendered image on the launch page. Instead just a blank rendered page is shown. The Python file I am using is given below. Note I did add the other python file with the links, as they are ok and have confidential information on them.

#!/usr/bin/env python2
# -*- coding: utf-8 -*-
Created on Fri Oct 5 16:21:08 2018

@author: wilpowa
import webbrowser
import os
import re

# Styles and scripting for the page
main_page_head = '''
    <meta charset="utf-8">
    <title>Fresh Run!</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;
    <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
        // 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);

# The main page layout and title bar
main_page_content = '''
<!DOCTYPE html>
<html lang="en">
    <!-- Shop 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"/>
          <div class="scale-media" id="trailer-video-container">

    <!-- 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 Run Shops</a>
    <div class="container">

# A single movie entry html template
shop_tile_content = '''
<div class="col-md-6 col-lg-4 shop_name text-center" data-trailer-youtube-id="{prod_link_id}" data-toggle="modal" data-target="#trailer">
    <img src="{prod_pic}" width="220" height="342">

def create_shop_tiles_content(shops):
    # The HTML content for this section of the page
    content = ''
    for shop in shops:
        # Extract the youtube ID from the url
        link_id_match = re.search(r'(?<=v=)[^&#]+', shop.name)
        link_id_match = link_id_match or re.search(r'(?<=be/)[^&#]+', shop.link)
        prod_link_id = link_id_match.group(0) if link_id_match else None

        # Append the tile for the movie with its content filled in
        content += shop_tile_content.format(
    return content

def open_shop_page(shops):
  # Create or overwrite the output file
  output_file = open('fresh_run.html', 'w')

  # Replace the placeholder for the movie tiles with the actual dynamically generated content
  rendered_content = main_page_content.format(shop_tiles=create_shop_tiles_content(shops))

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

  # 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
# webbrowser.open_new(+url)

This post was moved to a different board that fits your topic of discussion a bit better. This means you’ll get better engagement on your post, and it keeps our community organized so users can more easily find information.


As you’ll notice, your topic is now here in the Project Development Help and Advice board. No action is needed on your part; you can continue the conversation as normal here.