diff --git a/CHANGELOG.md b/CHANGELOG.md
index 06d6ade2d..fe7af9a7e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
- GCI90 C#: Use `Cast` instead of `Select` to cast.
+- [#370](https://github.com/green-code-initiative/creedengo-rules-specifications/pull/370) Add new JS rule GCI36 - Avoid autoplay for videos and audio content
### Changed
@@ -310,7 +311,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed
-- [#40](https://github.com/green-code-initiative/creedengo-rules-specifications/issues/40) Refactoring of package names (`cnumr` to `greencodeinitiative`)
+- [#40](https://github.com/green-code-initiative/creedengo-rules-specifications/issues/40) Refactoring of package names (`cnumr` to `greencodeinitiative`)
- [#55](https://github.com/green-code-initiative/creedengo-rules-specifications/issues/55) rename `eco-conception` tag of rules to `eco-design`
- [#58](https://github.com/green-code-initiative/creedengo-rules-specifications/issues/58) check and upgrade compatibility to SonarQube 9.9
- move common init scripts to `ecoCode-common` repository
diff --git a/src/main/rules/GCI36/js/GCI36.asciidoc b/src/main/rules/GCI36/js/GCI36.asciidoc
new file mode 100644
index 000000000..384feebba
--- /dev/null
+++ b/src/main/rules/GCI36/js/GCI36.asciidoc
@@ -0,0 +1,59 @@
+:!sectids:
+
+== Why is this an issue?
+
+Autoplaying media consumes unnecessary energy, especially when users might not be actively engaging with the content.
+This can drain battery life on devices, particularly on mobile devices, leading to increased energy consumption and potentially contributing to environmental impact.
+It can also consume data, particularly for users on limited data plans or in areas with poor internet connectivity.
+This can lead to unnecessary data usage and potentially increased costs for users.
+
+However, even without autoplay, segments of video or audio files might still download.
+This leads to unnecessary data usage, especially if users don't commence playback.
+To mitigate this, it's crucial to prevent browsers from preloading any content by configuring the appropriate settings.
+
+Video:
+
+[source,typescriptjsx,data-diff-id="3",data-diff-type="noncompliant"]
+----
+return (
+ <>
+ // Non-compliant
+ // Non-compliant
+ // Non-compliant
+ >
+)
+----
+
+[source,typescriptjsx,data-diff-id="2",data-diff-type="compliant"]
+----
+return (
+ // Compliant
+)
+----
+
+Audio:
+
+[source,typescriptjsx,data-diff-id="2",data-diff-type="noncompliant"]
+----
+return (
+ // Non-compliant
+)
+----
+
+[source,typescriptjsx,data-diff-id="2",data-diff-type="compliant"]
+----
+return (
+ // Compliant
+)
+----
+
+== Resources
+
+=== Documentation
+
+- https://github.com/cnumr/best-practices/blob/main/chapters/BP_4003_en.md[CNUMR best practices] - Avoid autoplay for videos and audio content
+
+=== Articles & blog posts
+
+- https://eco-conception.designersethiques.org/guide/en/content/5-2-video.html[eco-conception.designersethiques.org - 5.2. Video and sound]
+- https://www.ecoindex.fr/en/ecodesign/[www.ecoindex.fr - Some good practices]
diff --git a/src/main/rules/GCI36/js/GCI36.json b/src/main/rules/GCI36/js/GCI36.json
new file mode 100644
index 000000000..e1a0771d4
--- /dev/null
+++ b/src/main/rules/GCI36/js/GCI36.json
@@ -0,0 +1,4 @@
+{
+ "tags": ["creedengo", "eco-design", "react-native", "video", "audio"],
+ "compatibleLanguages": ["JAVASCRIPT", "TYPESCRIPT"]
+}