Youtube Embed player loader

Door Toby hinloopen, 12 jaar geleden, 9.026x bekeken

Geen geweldig-groot-ultra-deluxe-mega-script, maar wel 1tje die handig is voor je community-website waar users hun YT filmpjes kunnen dumpen:

Een Javascript-snippertje dat optioneel een aangepaste embedded youtube video player laadt welke in staat is video's te embedden waarbij embedding is uitgeschakeld.

De code:
Javascript:
(zie bijlage "youtube-embed-loader.js" onderin of op pastebin)

CSS:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
.youtube-embed {
    width: 640px;
    height: 365px;
}
.youtube-embed-player {
    width: 100%;
    height: 100%;
    display: block;
}


Installatie:
Voeg de JS & CSS code toe aan je HTML document.

Gebruik:
De Javascript-file zal na het laden van de pagina op zoek gaan naar alle DIV-elementen met de classname "youtube-embed" met een parameter "video".

Deze VIDEO-parameter moet de 11-tekens lange video-code bevatten van de youtube video. Deze code kan bestaan uit alfanumerieke tekens, lage streepjes en normale streepjes.

Deze DIV-elementen moeten leeg zijn; binnen deze DIV-elementen zal een videoplayer geplaatst worden met 100% width en 100% height, wat betekend dat het de grootte van het DIV-element zal aannemen. De grootte van het DIV-element kan je dan ook veranderen indien je wenst.

Voorbeelden:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div class=youtube-embed video=DcLAvJ94eI></div>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<?php
function printYoutubeEmbed($id, $width=640, $height=385)
{

    printf("<div class=youtube-embed "
            ."video="%s" style=\"width: %dpx; height: %dpx;\"></div>",
           htmlentities($id, ENT_COMPAT), intval($width), intval($height));
}

?>


Hier is de player live te aanschouwen:
http://kutcomputers.nl/php-forum/topic.php?id=6

De eerste video is een "niet-embedbare video".
De tweede video is is wel embedbaar (en een heerlijk nummer)

Nadelen:
- Geen "watch on youtube" optie. Dubbelklik switch't naar fullscreen ipv naar youtube versie.
- Geen titel bovenin player bij preview, zoals bij de normale embeds.

Zie ook:
http://www.phphulp.nl/php/forum/topic/nietembedbare-youtube-videos-embedden-op-je-site/73665/1/

Meer info:
Bij het uploaden van een youtube video kan je als eigenaar van de video bepalen of anderen je video mogen embedden op websites. Welke kneus dat bedacht heeft weet ik niet, maar het is erg irritant als de gebruikers op je website video's gaan embedden welke niet afgespeeld kunnen worden.

Echter, naast de youtube embed player heeft youtube ook een popup-player; een youtube embed player die de video fullscreen in het venster weergeeft, bedoeld voor in een popup. Dit is de enige speler van youtube welke niet controleert of de video embed mag zijn of niet.

Door deze popup-player in een iframe te plaatsen kan je de popup-player, welke niet-embedbare video's afspeelt, embedden op je site: op deze manier kan je dus niet-embedbare video's embedden op je site.

Er is echter een klein nadeel: De iOS devices (iPhone, iPad, iPod) beschikken over een aangepaste youtube video player; 1tje die niet werkt met flash, maar die wel de <embed> tag voor youtube video's herkent: door het gebruik van de iframe werken de video's niet meer op de iOS devices.

Als oplossing doe ik een controle in Javascript of de flash plugin geinstalleerd is; Indien er geen flash plugin is, zoals op de iOS devices, wordt de <embed> tag geplaatst, welke door de iOS devices weer omgezet wordt in een youtube video player. Deze player speelt echter geen niet-embedbare video's meer af.

Indien er wel een flash plugin is wordt de iframe player gebruikt, welke niet-embedbare video's kan afspelen.

Betrouwbaarheid:
Ik gebruik de iframe player nu ruim een jaar op een andere site onder een speciale BBCode tag als "experimentele YT player". De gebruikers gebruiken 'm en hij heeft altijd prima gewerkt.

Een jaar geleden heb ik zelfs een mailtje gestuurd naar de youtube devs om dit probleem te vermelden. Echter, in plaats van de beveiliging aan te passen, is de popup-player meerdere keren verbeterd, waardoor ook de iframe-player per aanpassing meer mogelijkheden bood:
- Eerder kon je autoplay niet uitzetten. Nu is het standaard uitgeschakeld.
- Eerder was er geen thumbnail. Nu wel.
- Eerder deden sommige video's het niet, nu lijken ze allemaal prima te werken.
- Recent is er een foutmelding toegevoegd wanneer je geen flashplayer hebt.

Echter, het feit dat youtube er niets aan lijkt te doen, betekend niet dat ze ook echt niets gaan doen. Er kan zomaar een dag komen dat ze het fixen en dan is de fun voorbij; als ze het fixen, kunnen ze dat op 2 manieren doen:
- Niet-embedbare video's niet afspelen in popup-speler. Verder geen probleem; de player blijft nog wel werken op normale video's.
- Framebuster die embedding in iframe voorkomt. Via een framebuster wordt de iframe-speler niet alleen waardeloos, maar wordt iedere pagina op je site met deze player een automatische redirect naar youtube.

Gesponsorde koppelingen

PHP script bestanden

  1. video-embed-loader.js

 

Er zijn 3 reacties op 'Youtube embed player loader'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Tobias Tobias
Tobias Tobias
12 jaar geleden
 
0 +1 -0 -1
Ziet er mooi uit, minder irritante randen etc zoals in een normale embed. Wat betreft de missende titel: Des te beter, kan ik mijn eigen titel erboven zetten.

Wat betreft de muziek: niet mijn smaak ;-)
Dalando De Zuil
Dalando De Zuil
12 jaar geleden
 
0 +1 -0 -1
Alles zo uitgeprint werkt het niet:

http://www.codedump.be/code/1033/

?
Toby hinloopen
toby hinloopen
12 jaar geleden
 
0 +1 -0 -1
@hierboven: dit script is afhankelijk van de aanwezigheid van een BODY-element.

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. video-embed-loader.js

Labels

Navigatie

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.