0

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>
Improve this question
8
  • That's odd. You can use Django's safe filter to output code without escaping it: https://docs.djangoproject.com/en/3.0/ref/templates/builtins/#safe But that doesn't look like your case. Can you share the whole template code? Commented May 26, 2020 at 17:38
  • It's a shot in the dark but you have whitespace after src in the first script calling the player. Maybe that is affecting the other script below. Commented May 26, 2020 at 17:58
  • I removed the conditional and pasted everything on a Django view and the twitch player rendered. No js source is shown on HTML. It seems like there is nothing wrong with that specific snippet Commented May 26, 2020 at 18:04
  • hmm...I'm wondering if it's an issue with the base template? So strange Commented May 26, 2020 at 18:05
  • I would build another template with just this snippet to check if it is the base else it is something from that template that is causing the source to be shown Commented May 26, 2020 at 18:09

2 Answers 2

Reset to default
2

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

good catch! Unfortunately this didn't fix it. I think it's because this was at the bottom of the base, executing after the it already hit the error in the middle of the content
Well I copy-pasted the rendered output to an HTML file opened in the browser. Although I am missing a lot of statistics the player renders as it should with the proper (I guess ) video. Can you try to do the same?
That's such a good idea! That works for me. So what the heck is the problem? Something wrong with a django setting then?
I think I figured it out. It's one of the plugins that load in the script section at the bottom of the base template. I deleted every script reference that was in the /plugin/ folder and then the video magically loaded. Going to remove one by one to find the culprit. thank you for all of your help!
0

use HTTPS

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.