Intégrer une vidéo YouTube

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

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

voici ;)

Dans mon fonction.php

Code:

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:

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:

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%;
}

et bien sûre classe video back a la div ou je veux la video.

Bonjour,

Citation:

taille de l'écran

Taille de l'écran ou la taille de la vidéo ?
Lorsque tu changes d'orientation ?
Cdt,