[Réglé] Problème d'intégration d'une vidéo Youtube en background

Forum de support pour les questions concernant l'utilisation de phpBB 3.1, les problèmes rencontrés lors de manipulations, de configuration du forum ou de personnalisation autres que les Styles ou les Extensions.

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com

Pensez à effectuer une recherche, la réponse à votre question a de grandes chances d'avoir déjà été donnée.

[Réglé] Problème d'intégration d'une vidéo Youtube en background

Messagepar GurMaster » 08 Mai 2016 à 10:04

Bonjour,

nous utilisons un script qui sert à afficher une vidéo Youtube en arrière plan mais j'ai tenté toutes les solutions possibles à son intégration sur notre forum mais rien à faire le forum semble bloquer l'affichage de notre script. J'ai également vérifié sur les autres posts ici si une solution de rechange existait (toujours en utilisant Youtube) mais sans succès. Nous utilison la version 3.1.9

Notre site ou le script est présentement fonctionnel: http://bdo-occulus.com

Le script en question:

Nous utilisons également jquery.min.js pour son affichage.

youtube.2.0.js
Code: Tout sélectionner
;(function ($, window) {
    
    // defaults
    var defaults = {
        ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed
        videoId: 'HCmtrZFGb4w?vq=auto', // BDO Video BG  <--- lien par défaut de notre Vidéo
        mute: false,
        repeat: true,
        width: $(window).width(),
        wrapperZIndex: 99,
        playButtonClass: 'tubular-play',
        pauseButtonClass: 'tubular-pause',
        muteButtonClass: 'tubular-mute',
        volumeUpClass: 'tubular-volume-up',
        volumeDownClass: 'tubular-volume-down',
        increaseVolumeBy: 10,
        start: 0
    };

    // methods

    var tubular = function(node, options) { // should be called on the wrapper div
        var options = $.extend({}, defaults, options),
            $body = $('body') // cache body node
            $node = $(node); // cache wrapper node

        // build container
        var tubularContainer = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 1; width: 100%; height: 100%"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 100%; z-index: 2; position: absolute; left: 0; top: 0;"></div>';

        // set up css prereq's, inject tubular container and set up wrapper defaults
        $('html,body').css({'width': '100%', 'height': '100%'});
        $body.prepend(tubularContainer);
        $node.css({position: 'relative', 'z-index': options.wrapperZIndex});

        // set up iframe player, use global scope so YT api can talk
        window.player;
        window.onYouTubeIframeAPIReady = function() {
            player = new YT.Player('tubular-player', {
                width: options.width,
                height: Math.ceil(options.width / options.ratio),
                videoId: options.videoId,
                playerVars: {
                    controls: 0,
                    showinfo: 0,
                    modestbranding: 1,
                    wmode: 'transparent'
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        window.onPlayerReady = function(e) {
            resize();
            if (options.mute) e.target.mute();
            e.target.seekTo(options.start);
            e.target.playVideo();
        }

        window.onPlayerStateChange = function(state) {
            if (state.data === 0 && options.repeat) { // video ended and repeat option is set true
                player.seekTo(options.start); // restart
            }
        }

        // resize handler updates width, height and offset of player after resize/init
        var resize = function() {
            var width = $(window).width(),
                pWidth, // player width, to be defined
                height = $(window).height(),
                pHeight, // player height, tbd
                $tubularPlayer = $('#tubular-player');

            // when screen aspect ratio differs from video, video must center and underlay one dimension

            if (width / options.ratio < height) { // if new video height < window height (gap underneath)
                pWidth = Math.ceil(height * options.ratio); // get new player width
                $tubularPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top
            } else { // new video width < window width (gap to right)
                pHeight = Math.ceil(width / options.ratio); // get new player height
                $tubularPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2}); // player height is greater, offset top; reset left
            }

        }

        // events
        $(window).on('resize.tubular', function() {
            resize();
        })

        $('body').on('click','.' + options.playButtonClass, function(e) { // play button
            e.preventDefault();
            player.playVideo();
        }).on('click', '.' + options.pauseButtonClass, function(e) { // pause button
            e.preventDefault();
            player.pauseVideo();
        }).on('click', '.' + options.muteButtonClass, function(e) { // mute button
            e.preventDefault();
            (player.isMuted()) ? player.unMute() : player.mute();
        }).on('click', '.' + options.volumeDownClass, function(e) { // volume down button
            e.preventDefault();
            var currentVolume = player.getVolume();
            if (currentVolume < options.increaseVolumeBy) currentVolume = options.increaseVolumeBy;
            player.setVolume(currentVolume - options.increaseVolumeBy);
        }).on('click', '.' + options.volumeUpClass, function(e) { // volume up button
            e.preventDefault();
            if (player.isMuted()) player.unMute(); // if mute is on, unmute
            var currentVolume = player.getVolume();
            if (currentVolume > 100 - options.increaseVolumeBy) currentVolume = 100 - options.increaseVolumeBy;
            player.setVolume(currentVolume + options.increaseVolumeBy);
        })
    }

    // load yt iframe js api

    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // create plugin

    $.fn.tubular = function (options) {
        return this.each(function () {
            if (!$.data(this, 'tubular_instantiated')) { // let's only run one
                $.data(this, 'tubular_instantiated', 
                tubular(this, options));
            }
        });
    }

})(jQuery, window);


et aussi celui-ci pour l'affichage (wrapper) sur nos pages:

accueil.js , forum,js etc...
Code: Tout sélectionner
$('document').ready(function() {
	var options = { videoId: 'HCmtrZFGb4w?vq=auto', start: 0 }; //  <--- lien priorisé de la Vidéo
	$('#wrapper').tubular(options);
	// HCmtrZFGb4w   Accueil
});


Alors j'ai tenté d'intégrer une:
Code: Tout sélectionner
<div id="wrapper"> // dans overall_header - après la balise <body>
</div> // dans overall_footer - avant la balise </body>


Ensuite j'ai ajouté mes scripts au bas du overall_footer et même testé dans le overall_header mais rien ne fonctionne.
L'affichage de la vidéo ne se fait pas, ni le son, comme ont le voit sur notre page d'accueil.

Serait-ce un fonction de blocage dans la version du forum, ou mauvaise manipulation de ma part?
Merci de votre aide!
GurMaster
Posteur néophyte
Posteur néophyte
 
Messages: 3
Enregistré le: 08 Mai 2016 à 09:28

Re: Problème d'intégration d'une vidéo Youtube en background

Messagepar cabot » 10 Mai 2016 à 10:27

Hello,

Place ton fichier youtube.2.0.js dans le répertoire template/ du style.

Ouvre overall_footer.html, trouve :
Code: Tout sélectionner
<!-- INCLUDEJS ajax.js -->

Ajoute après :
Code: Tout sélectionner
<!-- INCLUDEJS youtube.2.0.js -->
<script>
$('document').ready(function() {
	var options = { videoId: 'HCmtrZFGb4w?vq=auto', start: 0 }; //  <--- lien priorisé de la Vidéo
	$('#wrap').tubular(options);
	// HCmtrZFGb4w   Accueil
});
</script>

Par contre je te déconseille l'utilisation d'un background vidéo (et du son) sur le forum parce que ça devient très vite pénible, d'autant que la vidéo sera rechargée à chaque changement de page. Je te suggère la lecture de cette page. :)
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26821
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Problème d'intégration d'une vidéo Youtube en background

Messagepar GurMaster » 11 Mai 2016 à 01:36

J'ai effectué les correctifs mais toujours la même chose, pas d'affichage de la vidéo.
On dirais qu'un fonction bloque l'affichage, car le script devrait l'afficher normalement.

Pour l'accessibilité des fonctions vidéo c'est prévu que l'on ajoute des boutons dans le design du site: pause, stop et volume, et seulement pour notre page d'accueil que le son sera présent, pas pour notre forum.


PS: Je viens de tester la même chose dans le style: prosilver (qui est par defaut) mais toujours pareil.
Vu que notre style est basé sur le prosilver, j'ai cru que ça aurait pue avoir un impact!

De plus, en vérifiant le code source un fois en ligne, le script n'est pas affiché non plus dans le codage.
GurMaster
Posteur néophyte
Posteur néophyte
 
Messages: 3
Enregistré le: 08 Mai 2016 à 09:28

Re: Problème d'intégration d'une vidéo Youtube en background

Messagepar cabot » 11 Mai 2016 à 09:21

As-tu vidé le cache du forum après avoir effectué la modif dans le fichier ?

Edit : avant d'aller plus loin dans la modification du style prosilver, jette un oeil sur cette doc. :wink:
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26821
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Problème d'intégration d'une vidéo Youtube en background

Messagepar GurMaster » 11 Mai 2016 à 13:09

Oui c'est fait et ça fonctionne maintenant! Celle du navigateur était fait mais pas au forum, merci de l'info!

Avec les modifications dans notre style, je vais devoir ajouter un conteneur pour que notre fond image passe au dessus de la vidéo sinon, ça sera nickel. Merci de coup de main!

PS: Oui pour le lien je connais bien comment créer ou modifier les styles, j'en ai fait plusieurs depuis les versions phpbb2.
Bonne continuation!
GurMaster
Posteur néophyte
Posteur néophyte
 
Messages: 3
Enregistré le: 08 Mai 2016 à 09:28


Retourner vers Utilisation

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité