1

I'm trying to build a page where a YouTube player is embedded with a default video loaded. On the sidebar, I have a few pics of other videos. When one of the pics are clicked, the template reloads itself but with the YouTube player now playing the other video. Each of these pics will have a YouTube url which needs to be played when clicked. Very similar to the YouTube page of any video.

HTML:

                <div class="col-md-12 col-xs-12 video_menu_item">
            <div class="video_menu_description">
            <a href="/library/videos/" value="https://www.youtube.com/embed/EWrT-aBDxeI" name="para">
                <img src="/images/X.jpg" alt="Video name thumbnail" style="width:60%;height:100px;">
            </a>
            </div>
        </div>  

<div class="video_section_outer">
    <div class="col-md-12 col-xs-12 video_scroll_track">
        <div class="col-md-12 col-xs-12 video_item_outer">
            <h4 class="col-md-12 col-xs-12 video_track_sub_heading"><b>video.v_name</b></h4>
            <div class="col-md-12 col-xs-12 test_button_start">
                <iframe width="420" height="315" src="{{ link }}" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

URLS.PY:

    from django.conf.urls import include, url
    from django.contrib import admin

    urlpatterns = [

        # Video Sections
        url(r'^library/tests/', 'bt.views.tests', name='tests'),
        url(r'^library/videos-(?P<link1>[\w-]+)/', 'bt.views.videos', {'link': 'para'}),
        url(r'^library/videos/', 'bt.views.videos', name='videos'),
]

VIEWS.PY:

@csrf_exempt
def videos(request, link1 = "https://www.youtube.com/embed/Qj4nEYQA9ks"):
    content = {"link" : link1}
    return render_to_response('videos.html', content)
Sayse
  • 42,633
  • 14
  • 77
  • 146
Dr Confuse
  • 605
  • 1
  • 7
  • 24
  • You have to either use ajax for each link like here http://stackoverflow.com/questions/13337731/using-the-django-url-tag-in-an-ajax-call or return json. You're trying to make it a one page app while calling a view that entirely reloads your template, so you have to either ajaxify it or return json and do more computation on the front end. See more on this https://impythonist.wordpress.com/2015/06/16/django-with-ajax-a-modern-client-server-communication-practise/ – dmitryro Jul 04 '16 at 02:29

1 Answers1

0

I think it is not ideal to pass the whole youtube url. You can make it simple by just passing the video ID as a GET parameter like this:

# urls.py
urlpatterns = [
    # Video Sections
    url(r'^library/tests/', 'bt.views.tests', name='tests'),
    url(r'^library/videos/', 'bt.views.videos', name='videos'),
]

# views.py
def videos(request):
    link = 'https://www.youtube.com/embed/{}'.format(
        request.GET.get('id', 'Qj4nEYQA9ks')
    )
    return render_to_response('videos.html', {'link': link})

# videos.html
<a href="{% url 'videos' %}?id=EWrT-aBDxeI">
    <img src="/images/X.jpg" alt="Video name thumbnail">
</a>
<iframe width="420" height="315" src="{{ link }}" frameborder="0" allowfullscreen></iframe>

Let me know if anything is not clear.

Rieljun Liguid
  • 1,511
  • 1
  • 10
  • 17
  • Hey RL, I dont know how your brain is wired but that worked like magic! Thank you! If I had the power to award Harry Porter medals, you would totally get one. Meanwhile, do you recommend reading the django documentation entirely? I haven't because its quite large and I currently don't have that much time- but I do want to get fairly proficient at developing in this environment. I started 3 weeks ago and not sure if I am taking too much or too little time. – Dr Confuse Jul 04 '16 at 03:59
  • @DeepakMp then award the man the accepted answer. I would also highly recommend you to read the entire documentation, it is very helpful, not that large and very concise. – Wtower Jul 04 '16 at 05:30
  • @DeepakMp Ha, I think all I need is now is for you to make it as accepted answer. :) Anyway, as what wtower said, it is highly recommended to read the entire documentation but if you don't have much time, then you can develop the application you want and then just get back to the docs if you encounter any problem. – Rieljun Liguid Jul 04 '16 at 07:14