Bug 20783: Use iframe to embed Youtube videos

WWW::YouTube::Download is broken and not reliable.
Other alternative was to use HTML::Video::Embed but not updated since
years.

The best alternative seems to follow youtube advise and use an iframe
https://developers.google.com/youtube/iframe_api_reference

Test plan:
Put youtube video in 856$u (using different url formats, youtu.be,
youtube.com/embed, etc.)
Enable HTML5MediaEnabled and HTML5MediaYouTube and confirm that the
youtube videos are correctly embeded.

Signed-off-by: Kelly McElligott <kelly@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

C4/HTML5Media.pm

@@ -51,7 +51,7 @@ sub gethtml5media {
     my $HTML5MediaYouTube    = C4::Context->preference("HTML5MediaYouTube");
     my $marcflavour          = C4::Context->preference("marcflavour");
     foreach my $HTML5Media_field (@HTML5Media_fields) {
-    my $isyoutube            = 0;
+        my $is_youtube            = 0;
         my %HTML5Media;
         # protocol
         if ( $HTML5Media_field->indicator(1) eq '1' ) {
@@ -100,18 +100,14 @@ sub gethtml5media {
             $HTML5Media{srcblock} = $HTML5Media_field->subfield('u');
             if (grep /youtu\.?be/, $HTML5Media_field->subfield('u') ) {
                 if ($HTML5MediaYouTube == 1) {
-                    require WWW::YouTube::Download;
-                    import  WWW::YouTube::Download qw(playback_url);
-                    my $youtube           = WWW::YouTube::Download->new;
-                    eval {
-                        $HTML5Media{srcblock} = $youtube->playback_url(
-                            $HTML5Media_field->subfield('u'), {
-                                'fmt' => '43' #webm is the only format compatible to all modern browsers. maybe check for available qualities
-                            }
-                        );
-                    };
-                    if ($@) { warn $@; }
-                    else  { $isyoutube = 1;}
+                    my $url = $HTML5Media_field->subfield('u');
+                    # Credit for regex goes to https://stackoverflow.com/questions/3452546/how-do-i-get-the-youtube-video-id-from-a-url
+                    next unless $url =~ m{^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*};
+                    my $video_id = $2;
+                    next unless length($video_id) == 11; # Youtube video ids are 11 chars length
+                    $HTML5Media{srcblock} = sprintf '%s://www.youtube.com/embed/%s', $HTML5Media{protocol}, $video_id;
+                    $HTML5Media{is_youtube} = 1;
+                    $is_youtube = 1;
                 }
                else {
                    next; # do not embed youtube videos
@@ -145,12 +141,13 @@ sub gethtml5media {
         else {
             $HTML5Media{extension} = ($HTML5Media{srcblock} =~ m/([^.]+)$/)[0];
         }
-        if ( ( !grep /\Q$HTML5Media{extension}\E/, @HTML5MediaExtensions ) && ( $isyoutube != 1) ) {
+        if ( ( !grep /\Q$HTML5Media{extension}\E/, @HTML5MediaExtensions ) && ( $is_youtube != 1) ) {
             next; # not a specified media file
         }
         # youtube
-        if ($isyoutube == 1) {
+        if ($is_youtube == 1) {
             $HTML5Media{mime} = 'video/webm';
+            $HTML5Media{type} = 'video';
         }
         # mime
         if ( $HTML5Media_field->subfield('c') ) {

koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt

@@ -195,7 +195,7 @@
         </li>
     [% END %]
 [% END %]
-[% IF ( HTML5MediaEnabled ) %][% IF ( HTML5MediaSets ) %]<li id="media_tab"><a href="#html5media">Play media</a></li>[% END %][% END %]
+[% IF HTML5MediaEnabled && HTML5MediaSets.size %]<li id="media_tab"><a href="#html5media">Play media</a></li>[% END %]
 [% IF ( Koha.Preference('NovelistSelectStaffEnabled') && Koha.Preference('NovelistSelectStaffProfile') && Koha.Preference('NovelistSelectStaffView') == 'tab' ) %]
     <li class="NovelistSelect" style="display:none;"><a href="#NovelistSelect">NoveList Select</a></li>
 [% END %]
@@ -820,10 +820,15 @@ Note that permanent location is a code, and location may be an authval.
 <div id="html5media">
           [% FOREACH HTML5MediaSet IN HTML5MediaSets %]
             <p>
+                [% IF HTML5MediaSet.is_youtube %]
+                    <iframe id="player" type="text/html" width="640" height="360"
+                        src="[% HTML5MediaSet.srcblock %]" frameborder="0"></iframe>
+                [% ELSE %]
                   <[% HTML5MediaParent | html %] controls preload=none>
-                <[% HTML5MediaSet.child | html %] src="[% HTML5MediaSet.srcblock | html %]"[% HTML5MediaSet.typeblock | html %] />
+                    <[% HTML5MediaSet.child | html %] src="[% HTML5MediaSet.srcblock | url %]"[% HTML5MediaSet.typeblock | html %] />
                     [[% HTML5MediaParent | html %] tag not supported by your browser.]
                   </[% HTML5MediaParent | html %]>
+                [% END %]
             </p>
           [% END %]
 </div>