blog documentation FAQ followers forum marketplace services youtube

solved Embed Star Ratings in Video Player

The Jamroom Network » Forum » Using Jamroom » Page » Embed Star Ratings in Video Player
Ceri
Ceri
@adolygwr
8 years ago
370 posts
I wondered if it would be possible to embed the star rating widget at the bottom of the Youtube video player. I have a page which is setup as a music top 50. Here it is:- https://americymru.net/top-fifty-youtube-music-videos

At the moment if you want to give a video a 5 star rating you have to click on the thumbnail and go to the video page. I would like to set this feature to display the video in a popup with a star rating widget embedded in the player. Is this possible?


--
Ceri Shaw - AmeriCymru
updated by @adolygwr: 08/26/16 04:59:19AM
paul
@paul
8 years ago
4,326 posts
Yes, its possible, with template coding.
What I would do is add the player and its star rating as 'modal' code for each player on that page, then make clicking on the thumbnail launch the player modal window. Are you familiar with modal windows? Do you want some sample code?


--
Paul Asher - JR Developer and System Import Specialist
Ceri
Ceri
@adolygwr
8 years ago
370 posts
Not familiar with modal code. Could use some sample code....cheers :)


--
Ceri Shaw - AmeriCymru
paul
@paul
8 years ago
4,326 posts
OK - So where the YouTube image and its link (the < a > tag) show it your template loop, replace the code with something like this -

<a onclick="$('#youtube_modal_{$item._item_id}').modal();"><img src="{$item.youtube_artwork_url}" alt="{$item.youtube_title|jrCore_entity_string}" class="iloutline img_scale"></a>
<div id="youtube_modal_{$item._item_id}" class="modal_box" style="display:none;">
    <div class="item">
        <div class="container">
            <div class="row">
                <div class="col12 last">
                    {jrYouTube_embed type="iframe" item_id=$item._item_id auto_play=false width="100%"}
                    <br>
                    {jrCore_module_function function="jrRating_form" type="star" module="jrYouTube" index="1" item_id=$item._item_id current=$item.youtube_rating_1_average_count|default:0 votes=$item.youtube_rating_1_count|default:0}
                </div>
            </div>
        </div>
    </div>
    <div style="float:right;clear:both;margin-top:3px;">
        <a class="simplemodal-close">{jrCore_icon icon="close" size="16"}</a>
    </div>
    <div class="clear"></div>
</div>
See that the YT and its rating form are embedded but are invisible (style="display:none;") but that is changed when launching the modal window with the 'onclick' in the image link.
This is basic code - when its working you might want to edit it further to suit and to stylise it.
hth
Pa


--
Paul Asher - JR Developer and System Import Specialist
Ceri
Ceri
@adolygwr
8 years ago
370 posts
Many thanks :) Which template should I be adding this to?


--
Ceri Shaw - AmeriCymru
paul
@paul
8 years ago
4,326 posts
Presumably the template that is driving the https://americymru.net/top-fifty-youtube-music-videos page has a {jrCore_list module="jrYouTube" . . . } in it. The above code needs to go in the 'listing' template that that calls. Unless specified differently in the call, the default will be the YouTube module's item_list.tpl template.
hth
(If you need help let me have you admin login and I'll do it for you to get you started)


--
Paul Asher - JR Developer and System Import Specialist
updated by @paul: 05/23/16 12:13:50AM
Ceri
Ceri
@adolygwr
8 years ago
370 posts
That would be great! Many thanks will email login to (support)

--edit--
removed email to prevent auto-spam-bots adding address to some list.


--
Ceri Shaw - AmeriCymru
Ceri
Ceri
@adolygwr
8 years ago
370 posts
Many thanks for the mod....works perfectly. Just what I wanted :)


--
Ceri Shaw - AmeriCymru