Comment construire un arrière-plan vidéo du site YouTube
De nombreuses entreprises telles que la société centrale électrique et Adidas utilisent la vidéo d'arrière-plan pour délivrer un message ou une histoire sur les produits et services d'une manière intéressante.
Ressources dont vous avez besoin pour compléter ce tutoriel:
- La vidéo doit être 15-30 secondes.
- Il doit être réglé sur AutoPlay.
- Audio devrait être mis en sourdine. (Si vous désirez mettre des sons, assurez-vous que ce n'est pas gênant.)
- Assurez-vous que le texte ou les en-têtes devant la vidéo sont lisibles.
- Le message ou l'histoire de la vidéo doit être claire et concise.
- Big-fond
- A propos de la section
- Petit-fond section
La section de la classe de grand fond se tiendra notre section arrière-plan vidéo alors que notre propos de la section et la classe de petite section de fond seront couverts comme notre contenu principal. Nous allons envelopper ces deux dans un div avec une enveloppe de classe.
Maintenant, il est temps de mettre le contenu de chaque section. Dans le grand fond vidéo et petit-fond-section, placez un div avec un modèle de classe pour créer une enveloppe de texture lisse sur notre fond vidéo. Tous les autres contenus de chaque section contiendra alors une h1, h2, paragraphe et un lien de bouton sous la forme d'une balise d'ancrage.
Voici le set-up que nous avons utilisé dans notre balise d'ancrage:
- joueur de classe - cette classe sera utilisé plus tard par le plugin mb.YTPlayer pour permettre à l'arrière-plan vidéo
- videoURL - le lien vers la vidéo YouTube
- confinement - le sélecteur CSS de l'élément DOM où vous souhaitez afficher l'arrière-plan vidéo
- autoPlay - définir l'arrière-plan vidéo à la lecture automatique (valeur booléenne)
- Mute - détermine si la vidéo doit avoir un son ou non (valeur booléenne)
- startat - la chronologie particulière que vous souhaitez commencer la lecture vidéo
- l'opacité - de régler la transparence de la vidéo
Commençons d'ajouter des styles. Tout d'abord ajouter des styles généraux, qui incluent des règles de base telles que le HTML, le corps, les balises de paragraphe et une liste non ordonnée.
Ensuite, ajoutez un style sur emballage. motif et la classe de diviseur ainsi que l'identifiant de coloriser.
Maintenant, nous allons passer à notre propos de la section. Nous allons mettre en place un fond de couleur blanche et de lui donner un rembourrage de 60px en haut et en bas, puis 20px à gauche et à droite. Le reste du style sera juste des cours supplémentaires dans notre conception.
Pour notre petite vidéo de fond, qui servira également de notre pied de page, nous allons définir la largeur de 100% et va masquer le contenu de débordement à l'aide de l'attribut de trop-plein. Nous allons également ajouter un peu de rembourrage sur le haut et le bas pour faire assez d'espace pour montrer notre vidéo de fond sur le fond. Nous allons aussi mettre quelques styles sur nos balises d'ancrage sociale de classe, ainsi que sur son état de vol stationnaire.
Les questions des médias
Il est maintenant temps pour permettre à l'arrière-plan vidéo YoutTube. Appelez le joueur de classe dans les codes jQuery. Placez le code suivant ci-dessous juste avant la balise de corps de fermeture et l'envelopper l'intérieur Mots clés.
Pour détecter si un utilisateur navigue sur un appareil mobile ou tablette, nous pouvons définir l'élément caché dans une fenêtre particulière puis le manipuler en utilisant des codes jQuery. Pour ce faire, disons que nous voulons supprimer la vidéo de fond sur 480px fenêtre. Simplement, ajoutez display: none à l'élément de lecteur sur cette fenêtre particulière. Consultez le code ci-dessous:
Maintenant, pour manipuler ceci sur notre code jQuery, nous allons définir une is_mobile variable et définir la valeur à false. Ensuite, nous allons tester si la classe de joueur était affichage sans pareil. S'il est vrai, nous ajouterons la classe grand-background-default-image à la classe grand-fond et fond petite section d'utiliser une image d'arrière-plan par défaut. Dans le cas contraire, si elle est fausse l'arrière-plan vidéo YouTube reste le même.
jQuery Plugin Solution
Sur le code ci-dessus, je device.mobile méthodes () et device.tablet () pour vérifier si l'appareil de l'utilisateur est soit mobile ou une tablette. Si l'instruction conditionnelle retourne vrai, alors la classe grand-default-background image sera ajoutée à grand-fond et fond petite section. Dans le cas contraire, la classe des joueurs sera toujours actif, la vidéo de fond YouTube reste.