YouTube Video Background for Homepage Hero in Oxygen

le 26/10/2021
JAG

This members-only tutorial provides the steps to use Video Headers feature introduced in WordPress 4.7 to display a YouTube video whose URL can be set in the Customizer as a background for a Section in Oxygen.

Live Demo
Note
Video Headers feature in WordPress has been designed to be used on site’s homepage although filters are available to change this behaviour.
If you need YouTube backgrounds on inner pages, you’d need to look into those filters or use Video Background Pro plugin.
Step 1
Let’s enable support for custom header image or video and set the minimum viewport width to show the header video to 1025px (default is 900px).
Install and activate Code Snippets plugin.
Go to Snippets > Add New.
Title: Video Header
Code:

// Enable support for custom header image or video.
add_theme_support( 'custom-header', array(
'default_image' => 'https://youtubeheader.wpdemo.dev/wp-content/uploads/2019/04/hero.jpg',
'header-text' => true,
'default-text-color' => 'ffffff',
'width' => 1920,
'height' => 1080,
'flex-height' => true,
'flex-width' => true,
'uploads' => true,
'video' => true,
) );

add_filter( 'header_video_settings', 'custom_header_video_min_width', 10, 1 );
/**
* Change minimum width to show the header video.
*
* @since 1.1.0
*
* @link https://make.wordpress.org/core/2016/11/26/video-headers-in-4-7/
*
* @return array
*/
function custom_header_video_min_width( $settings ) {
$settings['minWidth'] = 1025;

return $settings;
}
Upload a fallback image (this will appear on tablets and mobiles instead of the video) to your site’s Media Library and replace https://youtubeheader.wpdemo.dev/wp-content/uploads/2019/04/hero.jpg with it.
Set the snippet to run everywhere.
Save changes and activate.
Step 2
Go to Appearance > Header.
Enter your YouTube URL and set the header image.

Step 3
Install and activate Hydrogen Pack or Hydrogen Paste.
Step 4
Edit your homepage (the Page set as Homepage at Settings > Reading) with Oxygen editor.
Open the Structure Panel. Select Inner Content, then copy and paste the following:
eyJzb3VyY2UiOiJodHRwczovL3lvdXR1YmVoZWFkZXIud3BkZW1vLmRldiIsImNvbXBvbmVudCI6W3siaWQiOjc1LCJuYW1lIjoiY3Rfc2VjdGlvbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjc1LCJjdF9wYXJlbnQiOjEwMDAwMywic2VsZWN0b3IiOiJzZWN0aW9uLTc1LTI2Iiwib3JpZ2luYWwiOnsiYWxpZ24taXRlbXMiOiJjZW50ZXIiLCJ0ZXh0LWFsaWduIjoiY2VudGVyIiwic2VjdGlvbi13aWR0aCI6ImZ1bGwtd2lkdGgiLCJjb250YWluZXItcGFkZGluZy10b3AiOiIyODAiLCJjb250YWluZXItcGFkZGluZy1sZWZ0IjoiMCIsImNvbnRhaW5lci1wYWRkaW5nLXJpZ2h0IjoiMCIsImNvbnRhaW5lci1wYWRkaW5nLWJvdHRvbSI6IjIwMCIsImJhY2tncm91bmQtcG9zaXRpb24tbGVmdC11bml0IjoiJSIsImJhY2tncm91bmQtcG9zaXRpb24tdG9wLXVuaXQiOiIlIiwicG9zaXRpb24iOiJyZWxhdGl2ZSIsImNvbG9yIjoiI2ZmZmZmZiJ9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsImNsYXNzZXMiOlsiaGVyby1zZWN0aW9uIl0sIm1lZGlhIjp7InRhYmxldCI6eyJvcmlnaW5hbCI6eyJjb250YWluZXItcGFkZGluZy10b3AiOiIyMDAiLCJjb250YWluZXItcGFkZGluZy1ib3R0b20iOiIyMDAifX0sInBob25lLWxhbmRzY2FwZSI6eyJvcmlnaW5hbCI6eyJjb250YWluZXItcGFkZGluZy10b3AiOiIzNjAiLCJjb250YWluZXItcGFkZGluZy1ib3R0b20iOiIxMDAifX19LCJuaWNlbmFtZSI6IllvdVR1YmUgVmlkZW8gQmFja2dyb3VuZCIsImN0X2NhdGVnb3J5IjoiSGVyb3MgJiBUaXRsZXMifSwiY2hpbGRyZW4iOlt7ImlkIjo3NiwibmFtZSI6ImN0X2NvZGVfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjo3NiwiY3RfcGFyZW50Ijo3NSwic2VsZWN0b3IiOiJjb2RlX2Jsb2NrLTc2LTI2Iiwib3JpZ2luYWwiOnsiY29kZS1waHAiOiI8P3BocFxuXHR0aGVfY3VzdG9tX2hlYWRlcl9tYXJrdXAoKTtcbj8+IiwiY29kZS1jc3MiOiIuaGVyby1zZWN0aW9uOmJlZm9yZSB7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRjbGVhcjogYm90aDtcblx0Y29udGVudDogJyc7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0ei1pbmRleDogMTtcblx0dG9wOiAwO1xuXHRyaWdodDogMDtcblx0Ym90dG9tOiAwO1xuXHRsZWZ0OiAwO1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDM1LCA0NCwgNTcsIDAuOSk7XG5cdGNvbnRlbnQ6ICcnO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcbn1cblxuLndwLWN1c3RvbS1oZWFkZXIge1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMDtcblx0cmlnaHQ6IDA7XG5cdGJvdHRvbTogMDtcblx0bGVmdDogMDtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcblx0bWFyZ2luOiBhdXRvO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0LW8tb2JqZWN0LWZpdDogY292ZXI7XG5cdCAgIG9iamVjdC1maXQ6IGNvdmVyO1xuXHQtby1vYmplY3QtcG9zaXRpb246IGNlbnRlcjtcblx0ICAgb2JqZWN0LXBvc2l0aW9uOiBjZW50ZXI7XG59XG5cbi53cC1jdXN0b20taGVhZGVyIGltZyxcbi53cC1jdXN0b20taGVhZGVyIGltZyxcbi53cC1jdXN0b20taGVhZGVyIHZpZGVvLFxuLndwLWN1c3RvbS1oZWFkZXIgaWZyYW1lIHtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcbn1cblxuLndwLWN1c3RvbS1oZWFkZXIgaWZyYW1lIHtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IC0zMCU7XG5cdHJpZ2h0OiAtMzAlO1xuXHRib3R0b206IC0zMCU7XG5cdGxlZnQ6IC0zMCU7XG5cdHdpZHRoOiAxNjAlO1xuXHRtaW4td2lkdGg6IDEwMCU7XG5cdG1heC13aWR0aDogMTYwJTtcblx0aGVpZ2h0OiAxNjAlO1xuXHRtaW4taGVpZ2h0OiA1Ni4yNXZ3O1xuXHRtYXgtaGVpZ2h0OiBub25lO1xuXHRtYXJnaW46IGF1dG87XG59XG5cbi53cC1jdXN0b20taGVhZGVyLXZpZGVvLWJ1dHRvbiB7XG5cdGRpc3BsYXk6IG5vbmU7XG59In0sImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOjF9LHsiaWQiOjc3LCJuYW1lIjoiY3RfZGl2X2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6NzcsImN0X3BhcmVudCI6NzUsInNlbGVjdG9yIjoiZGl2X2Jsb2NrLTc3LTI2Iiwib3JpZ2luYWwiOnsiYWxpZ24taXRlbXMiOiJjZW50ZXIiLCJ0ZXh0LWFsaWduIjoiY2VudGVyIiwicG9zaXRpb24iOiJyZWxhdGl2ZSIsInotaW5kZXgiOiIyIiwibWF4LXdpZHRoIjoiMTI4MCIsInBhZGRpbmctbGVmdCI6IjUiLCJwYWRkaW5nLWxlZnQtdW5pdCI6IiUiLCJwYWRkaW5nLXJpZ2h0IjoiNSIsInBhZGRpbmctcmlnaHQtdW5pdCI6IiUifX0sImNoaWxkcmVuIjpbeyJpZCI6NzgsIm5hbWUiOiJjdF9oZWFkbGluZSIsIm9wdGlvbnMiOnsiY3RfaWQiOjc4LCJjdF9wYXJlbnQiOjc3LCJzZWxlY3RvciI6ImhlYWRsaW5lLTc4LTI2Iiwib3JpZ2luYWwiOnsibWFyZ2luLWJvdHRvbSI6IjIwIiwibGluZS1oZWlnaHQiOiIxLjMiLCJmb250LWZhbWlseSI6Ik1lcnJpd2VhdGhlciIsImZvbnQtc2l6ZSI6IjU4IiwibGV0dGVyLXNwYWNpbmciOiIyIn0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwibWVkaWEiOnsidGFibGV0Ijp7Im9yaWdpbmFsIjp7ImZvbnQtc2l6ZSI6IjUwIn19LCJwaG9uZS1sYW5kc2NhcGUiOnsib3JpZ2luYWwiOnsiZm9udC1zaXplIjoiNDAifX19LCJjdF9jb250ZW50IjoiQ3JlYXRlIHlvdXIgd2Vic2l0ZSB3aXRoIE94eWdlbiJ9LCJkZXB0aCI6MX0seyJpZCI6NzksIm5hbWUiOiJjdF90ZXh0X2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6NzksImN0X3BhcmVudCI6NzcsInNlbGVjdG9yIjoidGV4dF9ibG9jay03OS0yNiIsIm9yaWdpbmFsIjp7Im1hcmdpbi1ib3R0b20iOiI1MCIsImZvbnQtc2l6ZSI6IjMwIiwiZm9udC1mYW1pbHkiOiJNb250c2VycmF0In0sIm1lZGlhIjp7InRhYmxldCI6eyJvcmlnaW5hbCI6eyJmb250LXNpemUiOiIyMiJ9fSwicGhvbmUtbGFuZHNjYXBlIjp7Im9yaWdpbmFsIjp7ImZvbnQtc2l6ZSI6IjE4In19fSwiY3RfY29udGVudCI6IkV2ZXJ5dGhpbmcgeW91IG5lZWQgdG8gY3JlYXRlIHlvdXIgb3duIGJlYXV0aWZ1bCB3ZWJzaXRlLiJ9LCJkZXB0aCI6MX0seyJpZCI6ODAsIm5hbWUiOiJjdF9saW5rX2J1dHRvbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjgwLCJjdF9wYXJlbnQiOjc3LCJzZWxlY3RvciI6ImxpbmtfYnV0dG9uLTgwLTI2Iiwib3JpZ2luYWwiOnsidXJsIjoiIyIsImJ1dHRvbi1zaXplIjoiMTQiLCJ1cmxfZW5jb2RlZCI6InRydWUifSwiY3RfY29udGVudCI6IlNlZSBPdXIgU2VydmljZXMifSwiZGVwdGgiOjF9XSwiZGVwdGgiOjR9XSwiZGVwdGgiOjN9XSwiY2xhc3NlcyI6eyJoZXJvLXNlY3Rpb24iOnsicGFyZW50Ijoic2FuZGJveCIsIm9yaWdpbmFsIjp7fX19LCJjb2xvcnMiOnt9fQ==
You may want to move the newly added Section to the top.
If you wish to have the header overlayed on top of this hero section, you could either set it globally by editing the Header Builder of your Main Catch All Template or do it just for the homepage by going to Manage > Settings > Page settings > Overlay Header > Always.
Step 5
Edit the Section and change the heading, text and button elements to your own.
Reference:
demo.seothemes.com/business-pro/

Nos experts se tiennent à votre disposition
pour répondre à vos questions et vous conseiller
dans votre projet digital.

Vous souhaitez développer une application ?

Envie d’échanger avec l’un de nos experts ? Besoin d’en savoir plus ?
En savoir plus

Recevez notre newsletter

La protection des données nous tient à cœur. JAG utilise les informations que vous fournissez afin de vous proposer des informations et du contenu pertinent sur nos produits et services. Vous pouvez vous désinscrire de ce type de communications à tout moment. Pour plus d'informations, consultez notre politique de confidentialité
© 2022 JAG Consulting, sas. Tous droits réservés.
© 2022 JAG Consulting, sas. Tous droits réservés.
4.8
Lire les 51 avis
google
Brieuc Pauly
08/09/2022

Créative, dynamique et très professionnelle, c'est à mon sens les piliers qui soutiennent cette équipe talentueuse ! Une agence à taille humaine qui privilégie la qualité et le résultat. Alors si vous souhaitez le meilleur pour votre communication adressez vous les yeux fermés à ces passionnés, plus que compétents ! (Translated by Google) Creative, dynamic and very professional, these are in my opinion the pillars that support this talented team! A human-sized agency that favors quality and results. So if you want the best for your communication, turn your eyes closed to these enthusiasts, who are more than competent!

google
Amaury Tardier
08/09/2022

Merci à Julien et son équipe, plus que satisfait par le travail fourni ! Je recommande vivement ! (Translated by Google) Thanks to Julien and his team, more than satisfied with the work provided! I highly recommend !

Ravi de travailler avec l'équipe JAG pour la gestion de mon site de e-Commerce. Equipe réactive et toujours pleine de bonnes idées pour améliorer les performances du site (Translated by Google) Glad to work with the JAG team for the management of my e-Commerce site. Responsive team always full of good ideas to improve the performance of the site

Merci à Julien pour son accompagnement dans mon projet, je recommande à 200% c est le Top (Translated by Google) Thanks to Julien for his support in my project, I recommend 200% it is the top

Excellente agence. Equipe est très pro, à l'écoute et de bon conseils. (Translated by Google) Excellent agency. The team is very professional, attentive and gives good advice.

Temps de réponse hors pair quand il y a eu un pb sur mon site, je vous recommande chaleureusement Julien :-) (Translated by Google) Unparalleled response time when there was a problem on my site, I warmly recommend Julien :-)

Charger plus
listarrow-right
Julien

Julien

Votre conseiller

I will be back soon

Une question ?

Julien
Bonjour ! Je suis Julien.
Comment puis-je vous aider?
Démarrer la conversation:
chat Live Chat