Videos (YouTube) in phpbb3 einbinden

[Allcrime]

Hallo an alle!

Ich habe zur Einbettung von Videos folgenden BBCode angelegt:

BBCode-Benutzung:

Code: Alles auswählen

[video]{URL}[/video]

HTML-Ersetzung (sogar responsiv):

Code: Alles auswählen

<div style="width:100%;">
        <div style="position: relative;padding-bottom:56.25%;height:0;">
            <script type="text/javascript">
            //<![CDATA[

            video_url = '{URL}';
            video_host = video_url.split('//')[1];
            video_host = video_host.split('/')[0].replace(/www./g, '');
            error_message = '<div style="position:absolute;left:0;right:0;width:100%;height:100%;border:0;overflow:hidden;background:silver;"><span style="position:absolute;top:44px;left:44px;"><b style="color:red;font-size:big;">Embedding Error</b><br /><hr />Host: <a href="http://www.' + video_host + '/" onclick="window.open(this.href);return false;" title="' + video_host + '">' + video_host + '</a><br />URL: <a href="{URL}" onclick="window.open(this.href);return false;" title="{URL}">{URL}</a></span></div>';

            if (video_host.match(/youtu/))
            {
                pattern = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
                video_id = video_url.match(pattern);
                
                if (video_id !== null) 
                { 
                    clean_id = video_id[2]; 
                    document.write('<object type="application/x-shockwave-flash" width="808" height="480" data="https://www.youtube-nocookie.com/v/'+ clean_id +'?showinfo=0&autoplay=0&autohide=1&modestbranding=1&rel=0" style="position:absolute;left:0;right:0;width:100%;height:100%;border:1px solid #688770;padding:5px;"><param name="movie" value="https://www.youtube-nocookie.com/v/'+ clean_id +'?showinfo=0&autoplay=0&autohide=1&modestbranding=1&rel=0" /></object>');
                    delete video_url; delete video_id; delete clean_id; delete pattern; delete video_host;
                }
                else
                {
                    document.write(error_message);
                    delete video_id; delete pattern; delete video_url; delete video_host;
                }
            }

            if (video_host.match(/dailymotion/))
            {
                pattern = /^.+dailymotion.com\/((video|hub|embed\/video)\/([^_]+))?[^#]*(#video=([^_&]+))?/;
                video_id = video_url.match(pattern);
                if(video_id[5] !== undefined) {clean_id = video_id[5] } else if (video_id[3] !== undefined) {clean_id = video_id[3] }; 
                document.write('<iframe width="808" height="480" src="http://www.dailymotion.com/embed/video/' + clean_id + '?logo=0&related=0" style="position:absolute;left:0;right:0;width:100%;height:100%;border:0;" scrolling="no" frameborder="0"></iframe>');
                delete video_url; delete video_id; delete clean_id; delete pattern; delete video_host;
            }

            if (video_host.match(/myvideo/))
            {
                video_url = video_url.replace(/\/[^\/]+$/, '').replace(/\/watch\//g, '/embed/');
                document.write('<iframe src="' + video_url + '" style="position:absolute;left:0;right:0;width:100%;height:100%;border:0;overflow:hidden;" width="808" height="480" scrolling="no" frameborder="0"></iframe>');
                delete video_url; delete video_host;
            }

            if (video_host.match(/vimeo/))
            {
                video_url = video_url.split('?')[0];
                pattern = /\/([^/]*)$/;
                video_id = video_url.match(pattern);
                clean_id = video_id[1];
                document.write('<iframe src="http://player.vimeo.com/video/' + clean_id + '?portrait=0&autopause=1&badge=0&byline=0&title=0" width="808" height="480" style="position:absolute;left:0;right:0;width:100%;height:100%;border:0;overflow:hidden;" scrolling="no" frameborder="0"></iframe>');
                delete video_url; delete video_id; delete clean_id; delete pattern; delete video_host;
            }

            if (video_host.match(/yahoo/))
            {
                video_url = video_url.split('?')[0];
                video_url = video_url + '?format=embed';
                document.write('<iframe width="808" height="480" src="' + video_url + '" style="position:absolute;left:0;right:0;width:100%;height:100%;border:0;overflow:hidden;" scrolling="no" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" allowtransparency="true"></iframe>');
                delete video_url; delete video_host;
            }

            if (video_host.match(/facebook/))
            {
                video_url = video_url.split('?v=')[1];
                clean_id = video_url.split('&')[0];
                new_url = 'http://www.facebook.com/video/embed?video_id=' + clean_id;
                document.write('<iframe width="808" height="480" src="' + new_url + '" style="position:absolute;left:0;right:0;width:100%;height:100%;border:0;overflow:hidden;" scrolling="no" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" allowtransparency="true"></iframe>');
                delete video_url; delete clean_id; delete new_url; delete video_host;
            }

            if (video_host.match(/rutube/))
            {
                video_url = video_url.split('?')[0];
                video_url = video_url.replace(/\/video\//g, '/play/embed/');
                document.write('<iframe width="808" height="480" src="' + video_url + '?sAuthor=false" style="position:absolute;left:0;right:0;width:100%;height:100%;border:0;overflow:hidden;" scrolling="no" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" allowtransparency="true"></iframe>');
                delete video_url; delete video_host;
            }

            if (video_host.match(/metacafe/))
            {
                video_url = video_url.split('?')[0];
                if (video_url.substr(-1) != '/') video_url += '/';
                video_url = video_url.replace(/\/+$/, '').replace(/\/[^\/]+$/, '').replace(/\/watch\//g, '/embed/');
                document.write('<iframe width="808" height="480" src="' + video_url + '" style="position:absolute;left:0;right:0;width:100%;height:100%;border:0;overflow:hidden;" scrolling="no" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" allowtransparency="true"></iframe>');
                delete video_url; delete video_host;
            }

            if (video_host.match(/soundcloud/))
            {
                document.write('<iframe width="808" height="480" src="https://w.soundcloud.com/player/?url={URL}&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" style="position:absolute;left:0;right:0;width:100%;height:100%;border:0;overflow:hidden;" scrolling="no" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" allowtransparency="true"></iframe>');
                delete video_url; delete video_host;
            }
            
            if (video_host.match(/myspace/))
            {
                video_url = video_url.split('?')[0];
                pattern = /\/([^/]*)$/;
                video_id = video_url.match(pattern);
                clean_id = video_id[1];
                
                if (video_url.match(/\/video\//))
                {
                    document.write('<iframe src="https://media.myspace.com/play/video/' + clean_id + '" width="100%" height="480" style="position:absolute;left:0;right:0;width:100%;height:100%;border:0;overflow:hidden;"  scrolling="no" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" allowtransparency="true"></iframe>');
                    delete video_url; delete video_id; delete clean_id; delete pattern; delete video_host;
                }

                if (video_url.match(/\/song\//))
                {
                    document.write('<div style="position:absolute;left:0;right:0;width:100%;height:100%;border:0;"><iframe src="https://media.myspace.com/play/song/' + clean_id + '" width="100%" height="100" style="width:100%;height:100px;border:0;overflow:hidden;"scrolling="no" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" allowtransparency="true"></iframe><br /><iframe src="https://myspace.com/" width="100%" height="390" style="position:absolute;left:0;right:0;top:100px;width:100%;max-height:390px;border:0;overflow:hidden;"scrolling="no" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" allowtransparency="true"></iframe></div>');
                    delete video_url; delete video_id; delete clean_id; delete pattern; delete video_host;
                } 
            }

            if (video_url !== 'undefined')
            {
                document.write(error_message);
                delete video_url; delete video_host;
            }
            
            delete error_message;
            
            //]]>
            </script>
        </div>
    </div>

Damit lassen sich die Videos von YT & sonstigen Hostern einbetten und der User kann einfach die URL der Quelle aus der Adresszeile des Browsers kopieren und im BBCode eingeben. Ist sehr viel einfacher in der Handhabung.

Allerdings habe ich aktuell ein Problem:

Beim iPad wird das Video nicht angezeigt, sondern nur grün umrandet. Da ich selbst kein iPad, sondern ein Tablet mit Android nutze, kann ich das nicht selbst testen.
Hat jemand vielleicht eine Lösung für das Problem? Könnte das am Script meiner HTML-Ersetzung liegen?

DANKE schon mal herzlich im Vorraus!

Viele Grüße,
Allcrime

EDIT:
Habe eben nochmal mit meiner Userin gesprochen. Sie kann die Videos bei YT probemlos anschauen. Muss also am Script liegen.

[sina54]

Das Video ist zu gross

[alexander2]

Hallo Zusammen,

heute habe ich mein Forum auf https umgestellt. Es funktioniert. Allerdings werden die youtube videos nicht mehr angezeigt. Ich habe von früher noch videos per oben beschriebenen bb code eingebunden und dann auf diesen umgestellt.

Code: Alles auswählen

<div class='bbvideo' data-url='{URL}' style='width: 640px; height: 390px; margin: 2px 0; display: inline-block; background: #000; color: #fff; overflow: hidden; vertical-align: bottom;'><div style='height: 100%;'><script>if (typeof bbmedia == 'undefined') { bbmedia = true; var e = document.createElement('script'); e.async = true; e.src = 'bbmedia.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s); }</script></div><div style='text-align: right; height: 14px; margin-top: -14px; padding-right: 2px; font: 10px/10px Verdana; color: #555;'><a style='color: #105289; text-decoration: none;' href='http://phpbbex.com/' target='_blank'>phpBB</a> &#91;video&#93;</div></div>

Beim alten bb code wird das video gar nicht mehr angezeigt und bei diesem code nur ein schwarzes Feld. Hat jemand eine Idee, an was es liegen könnte?

Besten Dank

Grüsse
Alex

[hackepeter13]

Die alten Videos von mit dem alten BBCode hochgeladen?

Und nun hast du einfach den BBCode im ACP geändert, also den alten gegen den neuen ersetzt?

Du hättest den alten drin lassen sollen und in dann einfach "nicht beim Posten anzeigen".
Den neuen Code einfach als neuen BBCode hinzufügen.

Aber wo hast du den neuen Code überhaupt her?
Wenn ich am Anfang die Klasse "bbvideo" sehe, vermute ich mal das es aus dem BBVideo Mod oder so ähnlich stammt.
Hast du denn auch die entsprechenden JS-Dateien hochgeladen?

Bei dem alten Code müsste man nur gucken warum die Videos nicht abgespielt werden, kann sein das Youtube etwas am Code geändert hat, was man einfach nur anpassen braucht.
Wenn ich mir beim alten Code oben folgenden Teil anschaue:
https://www.youtube-nocookie.com/v/'+ clean_id +'
kann da ja was nicht stimmen, zumindest wenn ich die URL mal direkt im Browser eingebe (mit einer Video-ID aus Youtube), bekomme ich keine Seite aufgerufen.
Versuche da mal mit folgendem zu ersetzen https://www.youtube.com/embed/'+ clean_id +'
(der zu ersetzende Teil kommt 2x in der Zeile vor -> beide ersetzen)

[alexander2]

Der Code stimmt schon. Und hat bisher auch ohne Probleme funktioniert. Seit ich auf https umgestellt habe gibt es Probleme. Ich habe es mit deinen Anpassungen versucht. Leider ohne Erfolg.

[hackepeter13]

Seit ich auf https umgestellt habe gibt es Probleme.

Ich kann mir kaum Vorstellen das es mit der Umstellung auf https zu tun hat.

Hast du denn mal einen Link zu einem Beitrag aus deinem Forum mit alten und mit neuen Video?

[Rodney19811]

Servus,

bei mir funktioniert es auch wunderbar Das einzige Problem ist das mit dem Fullscreen. Wie muss ich den Befehl ändern, damit die Videos auch im Fullscreen angesehen werden kann? Bei der Website funktionierte es, da ich den allowfullscreen Tag im Code drin hatte. Hier allerdings will er das nicht übernehmen

Gruß Rodney19811

Edit: Benutze die phpBB 3.2 Version