Displaying YouTube video from a custom field conditionally in Oxygen

le 26/10/2021
JAG

In Oxygen’s Facebook group a user asks:
I have a field where I enter a YouTube URL, and a template where I get that dynamic field. If the field is empty the template will render that iframe with an empty value, si I have a huge white space on the front-end.
to which I replied:
You could add a custom shortcode that returns the enclosed content if the field has a value and use it in a Shortcode Wrapper element.
In this members-only tutorial, we shall
attach a field group having a YouTube Video URL Url type custom field using Advanced Custom Fields to single posts.register a custom shortcode that shows the content if a YouTube URL has been set for single posts.use Oxygen’s Shortcode Wrapper component with the above shortcode.add a Code Block inside the Shortcode Wrapper to extract the ID from the YouTube video URL and pass it on to iframe embed code.add CSS to make the video take up the full available width while maintaining the height per the video’s aspect ratio.
We are going to ensure that no space gets taken up on the front end if a post does not have a YouTube URL set.
Screenshots:
In the post editor screen
In the front end
Step 1
Install and activate ACF.
Go to Custom Fields > Add New.
Title: Post Meta
Add a new “YouTube Video URL” field that is of Url type.

In the Location section, Set the field group to appear on your desired post type (Post, in this case).
Step 2
Install and activate Code Snippets plugin.
Go to Snippets > Add New.
Title: Shortcode to display the content if YouTube URL has been set for single posts
Code:

add_shortcode( 'show_youtube_video', 'func_show_only_if_youtube_url' );
/**
* Add a custom shortcode to show content only if a custom field has a value.
*
* Sample usage: [show_youtube_video]content[/show_youtube_video]
*
* @param array $atts An associative array of attributes, or an empty string if no attributes are given.
* @param string $content The enclosed content.
* @return void|string Enclosed content if custom field has a value or else nothing.
*/
function func_show_only_if_youtube_url( $atts, $content = '' ) {

$youtube_video_url = get_post_meta( get_the_ID(), 'youtube_video_url', true );

if ( $youtube_video_url ) { // if `youtube_video_url` custom field has a value..
return $content; // show the enclosed content.
} else {
return ''; // nothing.
}

}
Step 3
Edit the Oxygen Template for your single posts.
a) Add a Section.
Go to Advanced > Size & Spacing.
Container Padding: 0 on all sides
Section Container Width: full-width
b) Add a Shortcode Wrapper inside the Section.
Full shortcode:
[show_youtube_video][/show_youtube_video]
Background color: #000000
Go to Advanced > Layout.
Display: block
c) Add a Code Block inside the Shortcode Wrapper.
PHP & HTML:

CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}

.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#section-27-8 > .ct-section-inner-wrap {
display: block;
}
Replace section-27-8 with the ID of the parent Section.
Go to Advanced > Size & Spacing.
Padding (top and bottom): 75px
Max-width: 1120px

Step 4
Edit your Post(s) and enter the URL of your desired YouTube video in the custom field.
Ex.: https://www.youtube.com/watch?v=SibvCooWuyw
That’s it!
References:
https://gist.github.com/ghalusa/6c7f3a00fd2383e5ef33
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

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