Intégrer une vidéo YouTube

**Livie** · 15/03/2025, 21h40

Bonjour à tous,

Je rencontre un problème pour intégrer une vidéo YouTube sur mon site réalisé avec Divi. En suivant un tutoriel (https://www.divi-community.fr/tutori...ube-dans-divi/), tout a bien fonctionné, mais dès que je réduis un peu la taille de l'écran, la vidéo disparaît et je me retrouve uniquement avec l'image de fond que j'ai attribuée à ma section.

J'ai essayé d'utiliser un peu de code généré par ChatGPT pour ajuster la vidéo, mais cela a empiré les choses, et j'ai fini par devoir tout reprendre.

Je ne peux pas vous donner le lien de mon site car je travaille actuellement en local, mais si besoin, je peux réaliser une vidéo de mon problème. Les paramètres de mon site sont exactement les mêmes que ceux du tutoriel, donc je me demande si quelqu'un a une idée de la raison pour laquelle la vidéo disparaît dès que la taille de l'écran change un peu.

Merci d'avance pour vos retours et votre aide

**gabi7756** · 17/03/2025, 16h33

Boujour,
Ca manque d'extrait de code ...

**Livie** · 18/03/2025, 19h06

voici

Dans mon fonction.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function addVidbacking() {
  if ( is_page( '11' )) {
      wp_enqueue_script( 'vidbacking-js', get_stylesheet_directory_uri() . '/js/jquery.vidbacking.min.js', array( 'jquery' ), null, false );
  }
}
add_action( 'wp_enqueue_scripts', 'addVidbacking' );

Dans la page ou je veux afficher la video

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script>
    jQuery(document).ready(function($) {
        $("#video-back").prepend('<iframe src="https://www.youtube.com/embed/oLbNS3mAIB0" width="560" height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen  class="vidbacking"></iframe>');
    });
 
jQuery(function($) {
    $('#video-back').vidbacking({});
}); 
</script>

CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
.vidbacking-active-body-back{
	position: fixed;
	z-index: -100;
	min-width: 100%;
	min-height: 100%;
	top: 50%;
	left: 50%;
	background-size: cover;
	overflow: hidden;
	opacity: 1;
	transition: 2s opacity;
	transform: translateX(-50%) translateY(-50%);
}
 
.vidbacking-active-body-back-youtube{
	position: fixed;
	z-index: -100;
	/*min-width: 100%;
	min-height: calc(100% * 1.77);*/
	top: 50%;
	left: 50%;
	overflow: hidden;
	opacity: 1;
	transition: 2s opacity;
	transform: translateX(-50%) translateY(-50%);
}
 
.vidbacking-active-block-back{
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	height: auto;
	width: auto;
	z-index: -100;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
 
.vidbacking-active-block-back-youtube{
	position: absolute;
	/*min-width: 100%;
	min-height: 100%;*/
	height: auto;
	width: auto;
	z-index: 0;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
 
.vidbacking{
	display: none;
}
.vidmask-body-back{
	background: url(videooverlay1.png) repeat;
	opacity: 0.4;
	min-height: 100%;
	min-width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -50;
	display: block;
}
.vidmask-block-back{
	background: url(videooverlay1.png) repeat;
	opacity: 1;
	min-height: 100%;
	min-width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	width: auto;
	z-index: -50;
	display: block;
}
 
.fluid-width-video-wrapper {
	position: absolute!important;
	padding-top: 0;
	top: 50%;
	left: 50%;
}