Twitter Bootstrap Question posted in

Javascript code printing in django html template-Twitter bootstrap

I have a simple blog website in django that contains code to play embedded videos from Twitch if a video URL is given in the Post model. The model functions appear to be working but I’m running into issues in the html template itself. The javascript code is printing directly into the blog post instead of running the script to embed the video:

enter image description here

Here’s the snippet of code from the html template:

<div class="fsize-16 lheight-26 mt15"  data-trim="140">
                                    {% if post.video_URL %}
                                    <script src= "http://player.twitch.tv/js/embed/v1.js"></script>
                                    <div id='youtubeplayer'></div>
                                    <script type="text/javascript">
                                          var options = {
                                            width: 800,
                                            height: 500,
                                            video: "{{ post.get_video_id }}"
                                          };
                                          var player = new Twitch.Player("youtubeplayer", options);
                                          player.setVolume(0.5);
                                        </script> 
                                    {% endif %}
                                </div>

Any ideas would be greatly appreciated.

EDIT 4: ENTIRE RENDERED OUTPUT

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test.tv - a gaming community</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Cabin:400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="/static/fonts/css/font-awesome.min.css" />
    <!-- Bootstrap-->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" />
    <!-- Style -->
    <link rel="stylesheet" href="/static/css/style.css" />
    <!-- Responsive Style -->
    <link rel="stylesheet" href="/static/css/responsive.css" />
    <!-- Animate CSS -->
    <link rel="stylesheet" href="/static/plugins/animate.css-master/animate.min.css">
    <!-- Light Box -->
    <link href="/static/plugins/lightbox2-master/dist/css/lightbox.css" rel="stylesheet">
    <!-- Video js -->
    <link href="/static/css/video-js.css" rel="stylesheet">
    <!-- Datapicker -->
    <link href="/static/plugins/jquery-date-range-picker-master/dist/daterangepicker.min.css" rel="stylesheet">
    <!-- Sliders -->
    <link rel="stylesheet" type="text/css" href="/static/plugins/slick-1.8.0/slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="/static/plugins/slick-1.8.0/slick/slick-theme.css" />
    <!-- Tags-->
    <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-tagsinput.css" />
</head>
<body>
    <!-- PRELOADER START -->
    <!-- <div class="loader-wrapper">
        <div class='cssload-loader'>
            <div class='cssload-inner cssload-one'></div>
            <div class='cssload-inner cssload-two'></div>
            <div class='cssload-inner cssload-three'></div>
        </div>
    </div> -->
    <!-- PRELOADER END -->
    <!-- HEADER START -->
    <div class="header-line-wrapper">
        <header class="header-wrapper fixed-top plr100">
            <div class="table height-100p">
                <div class="table-row">
                    <div class="table-cell valign-middle text-left">
                        <a href="/" class="logo">
                            <img src="/static/images/logo.png" alt="" class="img-responsive inline-block">
                        </a>
                    </div>
                    <div class="table-cell valign-top text-center vm-sm">
                        <div class="main-menu">
                            <span class="toggle_menu">
                                <span></span>
                            </span>
                            <ul class="menu clearfix">
                                <li class="inline-block menu-item-has-children">
                                    <a href="/">
                                        Content
                                    </a>
                                </li>
                                <li class="inline-block menu-item-has-children">
                                    <a href="#">
                                        Creators
                                    </a>
                                </li>
                                <li class="inline-block menu-item-has-children">
                                    <a href="#">
                                        test
                                    </a>
                                </li>
                                <li>
                                    <a href="/create/">
                                        CREATE
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="table-cell valign-top text-right">
                        <div class="right-bl">
                            <div class="search-wrapper inline-block valign-middle">
                                <i class="fa fa-search color-white fsize-28" aria-hidden="true"></i>
                                <form class="search-content" action="#">

                                </form>
                            </div>

                            <a href="/profile/test" class="btn header-btn ml25 color-white hidden-sm hidden-xs">
                                test
                            </a>

                        </div>
                    </div>
                </div>
            </div>
        </header>
    </div>
    <!-- HEADER END -->
    <!-- BLOCK CONTENT -->

<!-- SECTION START -->
<section class="blog-content ptb150 each-element">
    <br >
    <div class="container">
        <div class="row">

            <div class="col-lg-8 col-md-8 col-md-push-2">

                <article class="vertical-item format-thumb fsize-0 clearfix">


                    <div class="post-content col-lg-12 col-md-12 col-sm-12 col-xs-12 equal-height">

                        <div class="post-wrapper">
                            <div class="table">
                                <div class="table-row">
                                    <div class="table-cell valign-top">
                                        <div class="platform fsize-14 fweight-700 uppercase">

                                            <a href="/tagged/test">#test</a>

                                        </div>
                                    </div>
                                    <div class="table-cell valign-top text-right">
                                        <div class="fsize-14 fweight-700 uppercase">
                                            May 26, 2020, 1:47 a.m.
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mt15">
                                <a href="post.html" class="post-title">
                                    <h3><a href="/post/the-literal-god">test video</a></h3>
                                </a>
                                <div class="fsize-16 lheight-26 mt15"  data-trim="140">

                                    <script src="http://player.twitch.tv/js/embed/v1.js"></script>
                                    <div id='youtubeplayer'></div>
                                    <script type="text/javascript">
                                          var options = {
                                            width: 800,
                                            height: 500,
                                            video: "630638363"
                                          };
                                          var player = new Twitch.Player("youtubeplayer", options);
                                          player.setVolume(0.5);
                                        </script>

                                </div>
                            </div>
                        </div>
                        <div class="post-bottom table">
                            <div class="table-cell valign-middle">
                                <i class="fa fa-user color-1 fsize-14" aria-hidden="true"></i>
                                <span class="color-2 fsize-14 ml5"><a href="/profile/test">test</a></span>
                            </div>
                            <div class="table-cell valign-middle text-right">
                                <i class="fa fa-comment color-1 fsize-14" aria-hidden="true"></i>
                                <span class="color-2 fsize-14 ml5">0</span>
                            </div>
                        </div>
                    </div>
                </article>

                <article class="vertical-item format-thumb fsize-0 clearfix">

                    <div class="item-left-img col-lg-4 col-md-4 col-sm-12 col-xs-12 equal-height">


                            <img src="/static/images/score/7.png">

                    </div>


                    <div class="post-content col-lg-8 col-md-8 col-sm-12 col-xs-12 equal-height">

                        <div class="post-wrapper">
                            <div class="table">
                                <div class="table-row">
                                    <div class="table-cell valign-top">
                                        <div class="platform fsize-14 fweight-700 uppercase">

                                            <a href="/tagged/test">#test</a>

                                        </div>
                                    </div>
                                    <div class="table-cell valign-top text-right">
                                        <div class="fsize-14 fweight-700 uppercase">
                                            May 22, 2020, 2:16 a.m.
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mt15">
                                <a href="post.html" class="post-title">
                                    <h3><a href="/post/test">test</a></h3>
                                </a>
                                <div class="fsize-16 lheight-26 mt15"  data-trim="140">

                                </div>
                            </div>
                        </div>
                        <div class="post-bottom table">
                            <div class="table-cell valign-middle">
                                <i class="fa fa-user color-1 fsize-14" aria-hidden="true"></i>
                                <span class="color-2 fsize-14 ml5"><a href="/profile/test">test</a></span>
                            </div>
                            <div class="table-cell valign-middle text-right">
                                <i class="fa fa-comment color-1 fsize-14" aria-hidden="true"></i>
                                <span class="color-2 fsize-14 ml5">0</span>
                            </div>
                        </div>
                    </div>
                </article>
                <div class="col-lg-12 text-center mt60">
                    <div class="pagination-page">
                        <a href="#" class="page-numbers prev">
                            <i class="fa fa-angle-left" aria-hidden="true"></i>
                        </a>
                        <span class="page-numbers active">
                            1
                        </span>
                        <a href="#" class="page-numbers">
                            2
                        </a>
                        <span class="page-numbers dots">
                            ...
                        </span>
                        <a href="#" class="page-numbers">
                            12
                        </a>
                        <a href="#" class="page-numbers next">
                            <i class="fa fa-angle-right" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- SECTION END -->
    <!-- FOOTER START -->
    <footer class="footer">
        <div class="container">
            <div class="row mb110">
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <a href="index.html">
                        <img src="{% static 'images/logo.png" alt="">
                    </a>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 text-right">
                    <ul class="footer-menu">
                        <li>
                            <a href="index.html">
                                Homepage
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Pages
                            </a>
                        </li>
                        <li>
                            <a href="gallery-masonry.html">
                                Gallery
                            </a>
                        </li>
                        <li>
                            <a href="games.html">
                                Games
                            </a>
                        </li>
                        <li>
                            <a href="blog-right.html">
                                Blog
                            </a>
                        </li>
                        <li>
                            <a href="contacts.html">
                                Contacts
                            </a>
                        </li>
                    </ul>
                    <div class="mt60">
                        Andouille landjaeger flank boudin. Jerky cupim alcatra sirloin porchetta,
                        <br /> turkey short ribs leberkas doner bacon pancetta buffalo.
                    </div>
                    <div class="social-content mt30">
                        <div class="social-list">
                            <a href="#">
                                <i class="fa fa-facebook" aria-hidden="true"></i>
                            </a>
                        </div>
                        <div class="social-list">
                            <a href="#">
                                <i class="fa fa-twitter" aria-hidden="true"></i>
                            </a>
                        </div>
                        <div class="social-list">
                            <a href="#">
                                <i class="fa fa-google-plus" aria-hidden="true"></i>
                            </a>
                        </div>
                        <div class="social-list">
                            <a href="#">
                                <i class="fa fa-youtube-play" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="copyright ptb30 col-lg-12">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        © Copyright 2018
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 text-right">
                        All Rights Reserved
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- FOOTER END -->
    <!-- Scripts -->
    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/plugins/slick-1.8.0/slick/slick.min.js"></script>
    <script src="/static/plugins/flex-menu/flexmenu.min.js"></script>
    <script src="/static/plugins/jquery-match-height-master/dist/jquery.matchHeight.js"></script>
    <script src="/static/plugins/muuri-master/muuri.js"></script>
    <script src="/static/plugins/vide-0.5.1/dist/jquery.vide.min.js"></script>
    <script src="/static/plugins/paroller.js-master/dist/jquery.paroller.min.js"></script>
    <script src="/static/js/video.js"></script>
    <script src="/static/js/jquery.inview.min.js"></script>
    <script src="/static/js/progressbar.min.js"></script>
    <script src="/static/plugins/lightbox2-master/dist/js/lightbox.js"></script>
    <script src="/static/js/moment.min.js"></script>
    <script src="/static/plugins/jquery-date-range-picker-master/dist/jquery.daterangepicker.min.js"></script>
    <script src="/static/plugins/test-master/dist/test.min.js"></script>
    <script src="/static/js/script.js"></script>
    <!-- Tag scripts-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
    <!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>-->
    <script src="/static/js/bootstrap-tagsinput.js"></script>
     <script>
       $("#post-form").submit(function(e){
         e.preventDefault();
       });
    </script>
</body>

</html>
Tags:

2

Answers


  1. 0

    use HTTPS

    <script src= "https://player.twitch.tv/js/embed/v1.js"></script>

    Login or Signup to reply.
  2. 0

    It is your base.html at the very bottom

     <script src="{% static 'js/bootstrap-tagsinput.js' %}"></script>
 $("#post-form").submit(function(e){
    e.preventDefault();
    });
 </script>

    you are not opening the script

         <script src="{% static 'js/bootstrap-tagsinput.js' %}"></script>
     <script>
       $("#post-form").submit(function(e){
         e.preventDefault();
       });
    </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search