Embedded Files
Voir aussi
Voir aussi
Les formats vidéos web
Les formats vidéos web
rotato.app
rotato.app
svgbackgrounds.com
svgbackgrounds.com
vidéo hero image
vidéo hero image
Code à copier et à intégrer <> dans votre page de site Google ⬇️
<video id="BAVideo" poster="https://just2dance.com/wp-content/uploads/2024/03/baleine.webp" loop muted playsinline >
<source
src="https://just2dance.com/wp-content/uploads/2024/03/baleine-alpha-1024-640-hevc.mov"
type='video/mp4; codecs="hvc1"'>
<source
src="https://just2dance.com/wp-content/uploads/2024/03/baleine-alpha-1024-640-vp9.webm"
type="video/webm">
</video>
<style>
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
video {
cursor: pointer;
width: 100%;
height: 100%;
}
</style>
<script>
const video = document.getElementById("BAVideo");
video.addEventListener("click", function() {
// Jouer la vidéo
if (video.paused) {
video.play();
} else {
video.pause();
}
});
</script>
vidéo mask ciculaire svg
vidéo mask ciculaire svg
Code à copier et à intégrer <> dans votre page de site Google ⬇️
<figure>
<video id="SKVideo" poster="https://just2dance.com/wp-content/uploads/2024/03/delorean-secret-base.jpg">
<source src="https://va.media.tumblr.com/tumblr_s8nga7VjGa1qgac6v.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<figcaption>
<h1>back to</h1>
<h1>the future</h1>
</figcaption>
</figure>
<style>
@import url('https://fonts.googleapis.com/css2?family=Corben:wght@400;700&display=swap');
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: rgb(0, 0, 0);
font-family: "Corben", serif;
}
h1 {
font-size:56px;
font-weight: 700;
line-height: 1.2;
}
figure{
margin: 0 auto;
width: 90vw;
height: 900px;
position: relative;
background: radial-gradient(circle, rgb(255, 165, 0) 33%, rgb(255, 0, 0) 0%, rgb(0, 0, 0) 45%);
overflow: hidden;
}
video{
cursor: pointer;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity:90%;
mix-blend-mode: hard-light;
clip-path: circle(23%);
}
figcaption{
position: absolute;
pointer-events: none;
width: 100%;
text-align: center;
bottom: 40vh;
font-size: 3vw;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: rgba(0, 255, 255,1);
color: rgba(0, 255, 255,0.4);
z-index: 2;
}
</style>
<script>
const video = document.getElementById("SKVideo");
video.addEventListener("click", function() {
// Jouer la vidéo
if (video.paused) {
video.play();
} else {
video.pause();
}
});
</script>
vidéo mask polygone svg
vidéo mask polygone svg
Code à copier et à intégrer <> dans votre page de site Google ⬇️
<figure>
<video id="SKVideo" poster="https://just2dance.com/wp-content/uploads/2024/03/delorean-secret-base.jpg">
<source src="https://va.media.tumblr.com/tumblr_s8nga7VjGa1qgac6v.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<figcaption>
<h1>back to</h1>
<h1>the future</h1>
</figcaption>
</figure>
<style>
@import url('https://fonts.googleapis.com/css2?family=Honk&display=swap');
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #ff3caf;
font-family: "Honk", system-ui;
}
h1 {
font-size: 110px;
font-weight: 700;
line-height: 1;
}
figure{
margin: 0 auto;
width: 100vw;
height: 700px;
position: relative;
background-color: #ff3caf;
background-image: linear-gradient(#ffff98, #ff3caf);
overflow: hidden;
}
video{
cursor: pointer;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: polygon(100% 0, 88% 63%, 58% 94%, 42% 94%, 12% 63%, 0 0);
}
figcaption{
position: absolute;
width: 100%;
text-align: center;
bottom: 20vh;
font-size: 3vw;
font-weight: 900;
text-transform: uppercase;
z-index: 2;
}
</style>
<script>
const video = document.getElementById("SKVideo");
video.addEventListener("click", function() {
// Jouer la vidéo
if (video.paused) {
video.play();
} else {
video.pause();
}
});
</script>
vidéo vertical arrondi 3 boutons
vidéo vertical arrondi 3 boutons
Code à copier et à intégrer <> dans votre page de site Google ⬇️
<div class="main">
<div class="container-L-R">
<div class="repeating-linear">
<div class="mark">
<h2>emergency exit</h2>
</div>
</div>
</div>
<div class="container">
<div class="container-video">
<video id="BAVideo" loop muted playsinline poster="https://just2dance.com/wp-content/uploads/2024/03/sky-plane.jpg">
<source src="https://va.media.tumblr.com/tumblr_s7eu3q192v1qgac6v_720.mp4" type="video/mp4">
</video>
</div>
<div class="command">
<div class="button-play">
<div class="play" onclick="playVideo()">
<h2>play</h2>
</div>
</div>
<div class="button-stop">
<div class="stop" onclick="stopVideo()">
<h2>stop</h2>
</div>
</div>
<div class="button-mute">
<div class="mute" onclick="toggleMute()">
<h2>sound</h2>
</div>
</div>
</div>
</div>
<div class="container-L-R">
<div class="exit-number">
<div class="mark-number">
<h1>22</h1>
</div>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text:wght@900&display=swap');
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: rgba(232, 239, 247, 0.4);
font-family: "Sofia Sans Extra Condensed", sans-serif;
}
.main {
max-width:100%;
display: grid;
grid-template-rows: repeat(1,100%);
grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr));
grid-auto-rows: 100%;
}
h1 {
font-family: "Big Shoulders Stencil Text", sans-serif;
font-size: 50px;
line-height: 2;
font-weight: 900;
}
h2 {
font-size: 32px;
line-height: 1.5;
font-weight: 500;
}
p {
font-size: 16px;
line-height: 1.2;
font-weight: 500;
}
video {
margin: 0 auto;
max-width:320px;
min-width: 80%;
height:auto;
border: solid 6px rgba(187, 196, 207, 1);
border-radius: 160px 160px 220px 220px;
}
.container {
margin: 0 auto;
padding: 10% 2% 10% 2%;
width: 100%;
max-width: 100%;
min-width: fit-content;
background-color: rgba(231, 236, 242, 0.3);
border-radius: 40px;
}
.container-L-R {
width: 90%;
max-width: 90%;
margin: 0 auto;
min-width: fit-content;
background-color: rgba(231, 236, 242, 0.3);
border-radius: 40px;
}
.repeating-linear {
margin: 20% auto;
padding: 10% 0 0 0;
width: 40%;
max-width: 40%;
height: 20%;
border-radius: 40px;
background: repeating-linear-gradient(-45deg, rgba(231, 236, 242, 0), rgba(231, 236, 242, 0) 20px, rgba(242, 25, 65, 1) 20px, rgba(242, 25, 65, 1) 40px);
}
.mark {
background-color: rgba(231, 236, 242, 1);
margin: 0 auto;
text-align: center;
text-transform: uppercase;
color: rgba(242, 25, 65, 1);
border-top: 3px solid rgba(242, 25, 65, 1);
border-bottom: 3px solid rgba(242, 25, 65, 1);
}
.exit-number {
margin: 20% auto;
padding: 6% 0 6% 0;
width: 40%;
max-width: 40%;
height: auto;
border-radius: 40px;
border-top: 10px solid rgba(182, 185, 194, 1);
border-bottom: 10px solid rgba(196, 202, 209, 1);
border-left: 10px solid rgba(196, 202, 209, 1);
border-right: 10px solid rgba(182, 185, 194, 1);
box-shadow: inset 0px 10px 20px 10px rgba(182, 185, 194, 0.8);
background-color: rgba(231, 236, 242, 1);
filter: drop-shadow(0 0 60px rgba(196, 202, 209, 0.8));
}
.mark-number {
background-color: rgba(231, 236, 242, 1);
margin: 0 auto;
padding: 5%;
width: 55%;
max-width: 55%;
height: auto;
text-align: center;
text-transform: uppercase;
border-radius: 20px;
color: rgba(87, 88, 97, 1);
background: repeating-linear-gradient(-45deg, rgba(247, 217, 109, 1), rgba(247, 217, 109, 1) 20px, rgba(196, 202, 209, 1) 20px, rgba(196, 202, 209, 1) 40px);
}
.container-video {
padding: 50px;
margin: 0 auto;
min-width: max-content;
max-width: fit-content;
height: auto;
border-top: 3px solid rgba(244, 246, 250, 1);
border-bottom: 4px solid rgba(182, 185, 194, 0.8);
border-radius: 220px;
background-image: linear-gradient(to right, rgba(231, 236, 242, 1), rgba(196, 202, 209, 1));
filter: drop-shadow(0 0 60px rgba(196, 202, 209, 0.8));
}
.command {
margin: 0 auto;
padding-top: 60px;
display: grid;
grid-template-rows: repeat(1,150px);
grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
grid-auto-rows: 150px;
width: 100%;
}
.command h2 {
font-size: 32px;
line-height: 2.3;
font-weight: 500;
}
.button-play {
height: 100px;
margin: 0 auto;
}
.button-stop {
height: 100px;
margin: 0 auto;
}
.button-mute {
height: 100px;
margin: 0 auto;
}
.play {
cursor:pointer;
width: 80px;
height: 90px;
text-align: center;
text-transform: uppercase;
color: rgba(164, 172, 189, 1);
border-top: 4px solid rgba(251, 252, 255, 1);
border-bottom: 12px solid rgba(182, 185, 194, 0.8);
border-radius: 20px;
background-image: linear-gradient(to top, rgba(231, 236, 242, 1), rgba(196, 202, 209, 1));
filter: drop-shadow(0 0 30px rgba(196, 202, 209, 0.8));
}
.play:hover {
cursor:pointer;
color: rgba( 12, 219, 44, 1);
background-image: linear-gradient(rgba(231, 236, 242, 1), rgba(196, 202, 209, 1));
}
.play:active {
cursor:pointer;
color: rgba(251, 252, 255, 1);
border-top: 4px solid rgba(251, 252, 255, 1);
border-bottom: 8px solid rgba(182, 185, 194, 0.8);
background-image: linear-gradient( to top, rgba(231, 236, 242, 1), rgba(196, 202, 209, 1));
}
.stop {
cursor: pointer;
width: 80px;
height:90px;
text-align: center;
text-transform: uppercase;
color: rgba(164, 172, 189, 1);
border-top: 4px solid rgba(251, 252, 255, 1);
border-bottom: 12px solid rgba(182, 185, 194, 0.8);
border-radius: 20px;
background-image: linear-gradient(to top, rgba(231, 236, 242, 1), rgba(196, 202, 209, 1));
filter: drop-shadow(0 0 30px rgba(196, 202, 209, 0.8));
}
.stop:hover {
cursor:pointer;
color: rgba(242, 25, 65, 1);
background-image: linear-gradient(rgba(231, 236, 242, 1), rgba(196, 202, 209, 1));
}
.stop:active {
cursor:pointer;
color: rgba(251, 252, 255, 1);
border-top: 4px solid rgba(251, 252, 255, 1);
border-bottom: 8px solid rgba(182, 185, 194, 0.8);
background-image: linear-gradient( to top, rgba(231, 236, 242, 1), rgba(196, 202, 209, 1));
}
.mute {
cursor:pointer;
width: 80px;
height:90px;
text-align: center;
text-transform: uppercase;
color: rgba(164, 172, 189, 1);
border-top: 4px solid rgba(251, 252, 255, 1);
border-bottom: 12px solid rgba(182, 185, 194, 0.8);
border-radius: 20px;
background-image: linear-gradient(to top, rgba(231, 236, 242, 1), rgba(196, 202, 209, 1));
filter: drop-shadow(0 0 30px rgba(196, 202, 209, 0.8));
}
.mute:hover {
cursor:pointer;
color: rgba(24, 127, 237, 1);
background-image: linear-gradient(rgba(231, 236, 242, 1), rgba(196, 202, 209, 1));
}
.mute:active {
cursor:pointer;
color: rgba(251, 252, 255, 1);
border-top: 4px solid rgba(251, 252, 255, 1);
border-bottom: 8px solid rgba(182, 185, 194, 0.8);
background-image: linear-gradient( to top, rgba(231, 236, 242, 1), rgba(196, 202, 209, 1));
}
</style>
<script>
const video = document.getElementById("BAVideo");
function playVideo() {
video.play();
}
function stopVideo() {
video.pause();
}
function toggleMute(){
video.muted = !video.muted;
}
</script>
vidéo alpha horizontal z-index
vidéo alpha horizontal z-index
Code à copier et à intégrer <> dans votre page de site Google ⬇️
<div class="container">
<img src="https://just2dance.com/wp-content/uploads/2024/03/paris-to-thesea-4.webp" >
<video id="BAVideo" poster="https://just2dance.com/wp-content/uploads/2024/03/baleine.webp" loop muted playsinline >
<source
src="https://just2dance.com/wp-content/uploads/2024/03/baleine-alpha-1024-640-hevc.mov"
type='video/mp4; codecs="hvc1"'>
<source
src="https://just2dance.com/wp-content/uploads/2024/03/baleine-alpha-1024-640-vp9.webm"
type="video/webm">
</video>
</div>
<style>
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #e1f5eb;
background-size: cover;
background-repeat: no-repeat;
background-image: url("https://64.media.tumblr.com/29e9fb25d24f19ee3a04fa66c9ee13bc/8336aa005f7dbc27-fd/s2048x3072/ed7b4d1c6b94c1126869dfc6b46da795fedcac0c.webp");
}
video {
cursor: pointer;
position:absolute;
top: 0px;
left: 0px;
z-index: 0;
padding: 10% 10% 0 10%;
width:100%;
height: auto;
background-color:;
}
.container {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
height: auto;
}
.container img {
pointer-events: none;
position:absolute;
top: 0px;
left: 0px;
width: 100%;
height: auto;
z-index: 2;
}
</style>
<script>
const video = document.getElementById("BAVideo");
video.addEventListener("click", function() {
// Jouer la vidéo
if (video.paused) {
video.play();
} else {
video.pause();
}
});
</script>
vidéo alpha verticale bouton svg
vidéo alpha verticale bouton svg
Code à copier et à intégrer <> dans votre page de site Google ⬇️
<div class="container">
<div class="container-video">
<video id="BAVideo" loop muted playsinline poster="http://just2dance.com/wp-content/uploads/2024/03/720x1280-25-voiture.png">
<source src="https://just2dance.com/wp-content/uploads/2024/02/720x1280-25-voiture-hevc.mov" type="video/mp4; codecs="hvc1"">
<source src="https://just2dance.com/wp-content/uploads/2024/02/720x1280-25-voiture-vp9.webm" type="video/webm">
</video>
</div>
<div class="command">
<div class="button-play">
<div class="before-play">
<div class="play" onclick="playVideo()">
<svg version="1.1" id="play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<g>
<g>
<path d="M51.9,71.9c3.7,1.2,7.6-0.9,8.8-4.5s-0.9-7.6-4.5-8.8c-3.7-1.2-7.6,0.9-8.8,4.5C46.2,66.8,48.2,70.7,51.9,71.9z"/>
</g>
<g>
<path d="M36.5,62c2.6,0.8,5.4-0.6,6.3-3.2c0.8-2.6-0.6-5.4-3.2-6.3c-2.6-0.8-5.4,0.6-6.3,3.2C32.4,58.3,33.8,61.1,36.5,62z"/>
</g>
<path d="M2.5,4.6c3.7-4.1,10-4.5,14.1-0.9C13.4,2.8,9.2,4.2,6.1,8.2c-2.5,3.3-3.7,8-2.7,10.5C-0.8,15.1-1.2,8.7,2.5,4.6z"/>
<path d="M13.8,41.8H9.3v1.3H2.5V32.2h13.8c0.6-1.6,1.4-3.2,2.3-4.7C28.3,10.6,46.7,4.4,60.2,5.4C46.9-2.4,30.9-1.5,18.7,6.3
c2,3.6,1.7,8.3-1.2,11.5c-3.1,3.5-8,4.3-12,2.3C-5.4,39.2,1.1,63.6,20.2,74.6C16.1,68.1,12,55,13.8,41.8z"/>
<g>
<path d="M8.3,40.8v1.3H3.5v-8.9h18.4l-5.4,7.6H8.3z M13.6,37.8l1.1-1.5H8.3v1.5H13.6z"/>
<path d="M17.3,42.1l6.5-8.9h5.6l-4.3,5.8h5.9v-2.7h4.8v5.7H17.3z"/>
<path d="M54.3,33.2v8.9h-4.8v-3l-2.2,3H35.1l6.4-8.9H54.3z M49.5,39.1v-2.8h-4.9l-2,2.8H49.5z"/>
<path d="M73,33.2v10.6h-4.8v-1.7H54.8l4-5.7h-3.5v-3.2h10.6l-4.2,5.7h6.5v-5.7H73z"/>
</g>
</g>
</svg>
</div>
</div>
</div>
<div class="button-stop">
<div class="before-stop">
<div class="stop" onclick="stopVideo()" >
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.0" id="stop" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<g>
<g>
<path d="M74.1,8.2c-3.1-4-7.2-5.4-10.5-4.5c-4.1,3.7-4.5,10-0.9,14.1c3.7,4.1,10,4.5,14.1,0.9l0,0C77.8,16.2,76.6,11.4,74.1,8.2z"
/>
</g>
<g>
<path d="M63,43.1h-6.1h-0.6H35h-0.3h-6.8v-5.7h-0.7H22l4.2,5.7H7.7v-7.7h4.8l-2.3-3.2h11.6h5.4h13.9v1.9l1.4-1.9h13.7h0.6h7.1
c-0.6-1.6-1.4-3.2-2.3-4.7C51.9,10.6,33.5,4.4,20,5.4C0.9,16.4-5.7,40.9,5.4,60c11,19.1,35.5,25.7,54.6,14.6c0,0,0,0,0,0
c4.1-6.6,8.3-19.7,6.5-32.8H63V43.1z M28.4,61.9c-3.7,1.2-7.6-0.9-8.8-4.5s0.9-7.6,4.5-8.8s7.6,0.9,8.8,4.5S32,60.7,28.4,61.9z
M43.7,68c-2.6,0.8-5.4-0.6-6.3-3.2c-0.8-2.6,0.6-5.4,3.2-6.3s5.4,0.6,6.3,3.2C47.8,64.3,46.4,67.1,43.7,68z"/>
<polygon points="46.1,38.1 50.1,38.1 50.1,37.3 46.7,37.3 "/>
<polygon points="35,42.7 38.8,37.4 35,37.4 "/>
</g>
<g>
<polygon points="40.1,33.2 26.2,33.2 22.8,33.2 12.2,33.2 16.4,39.1 13.4,39.1 13.4,36.4 8.7,36.4 8.7,42.1 24.2,42.1 20.1,36.4
22.8,36.4 26.2,36.4 28.9,36.4 28.9,42.1 34,42.1 34,36.4 40.1,36.4 "/>
<path d="M36.7,42.1h19.2v-8.9H43.1L36.7,42.1z M46.2,36.3h4.9v2.8h-6.9L46.2,36.3z"/>
<path d="M57.2,33.2v8.9H62v-1.3h8.2l5.4-7.6H57.2z M67.3,37.8H62v-1.5h6.4L67.3,37.8z"/>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<style>
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #e1f5eb;
background-size: cover;
background-repeat: no-repeat;
background-image: url("https://64.media.tumblr.com/adc3bfa5d20d74e5f68acfb19baa3bb2/cdc6ec5fe0a3049a-59/s2048x3072/dee4857f25598b999249896260f8dad2933c464e.jpg") ;
}
video {
padding: 30px;
max-width:320px;
height:auto;
border-radius: 220px;
opacity: 100%;
}
.container {
padding-top: 70px;
padding-bottom: 70px;
width:30%;
max-width: 80%;
min-width: fit-content;
margin: 0 auto;
}
.container-video {
margin: 0 auto;
min-width: max-content;
max-width: fit-content;
height: auto;
border-radius: 220px;
background-size: cover;
background-repeat: no-repeat;
background-image: url("https://64.media.tumblr.com/ff08e1a115d4ff4cd4f539f42ce33ee9/ce5bf12b1595594b-a2/s1280x1920/4b50089c853eb4cfb7f040e83c064d199bd1a42d.jpg") ;
}
.command {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 40px;
width: 100%;
}
.button-play {
width: 100%;
height: 100px;
}
.button-stop {
width: 100%;
height: 100px;
}
.before-play {
width: 80px;
height: 100px;
margin: 2% 0 2% auto;
padding-right: 20px;
}
.before-stop {
width: 80px;
height: 100px;
margin: 2% 2% 2% 0;
padding-left: 20px;
}
.play {
cursor:pointer;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 28.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="back-all" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="9.886719e-06" y1="40.0022" x2="80.2264" y2="40.0022"><stop offset="0" style="stop-color:%23ff6d10"/><stop offset="1" style="stop-color:%23bb2823"/></linearGradient><path fill="url(%23SVGID_1_)" d="M60.2,5.4C46.9-2.4,30.9-1.5,18.7,6.3c-0.5-0.9-1.2-1.8-2.1-2.6C12.5,0.1,6.2,0.5,2.5,4.6c-3.7,4.1-3.3,10.5,0.9,14.1c0.7,0.6,1.4,1.1,2.1,1.4C-5.4,39.2,1.1,63.6,20.2,74.6c19.1,11,43.6,4.5,54.6-14.6C85.9,40.9,79.4,16.4,60.2,5.4z"/></svg>');
fill: rgba(235, 206, 182, 1);
filter: drop-shadow(0 0 30px rgba(255, 199, 31, 1));
}
.play:hover {
cursor:pointer;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 28.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="back-all" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="9.886719e-06" y1="40.0022" x2="80.2264" y2="40.0022"><stop offset="0" style="stop-color:%23bb2823"/><stop offset="1" style="stop-color:%23ff6d10"/></linearGradient><path fill="url(%23SVGID_1_)" d="M60.2,5.4C46.9-2.4,30.9-1.5,18.7,6.3c-0.5-0.9-1.2-1.8-2.1-2.6C12.5,0.1,6.2,0.5,2.5,4.6c-3.7,4.1-3.3,10.5,0.9,14.1c0.7,0.6,1.4,1.1,2.1,1.4C-5.4,39.2,1.1,63.6,20.2,74.6c19.1,11,43.6,4.5,54.6-14.6C85.9,40.9,79.4,16.4,60.2,5.4z"/></svg>');
fill: rgba(235, 206, 182, 1);
filter: drop-shadow(0 0 60px rgba(255, 199, 31, 1));
}
.stop {
cursor:pointer;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 28.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Calque_6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="11.7134" y1="68.2866" x2="76.5712" y2="3.4288"><stop offset="0" style="stop-color:%23fa0703"/><stop offset="1" style="stop-color:%2501237"/></linearGradient><path fill="url(%23SVGID_1_)" d="M74.6,19.9c0.7-0.4,1.4-0.8,2.1-1.4c4.1-3.7,4.5-10,0.9-14.1s-10-4.5-14.1-0.9c-0.9,0.8-1.6,1.7-2.1,2.6C49.1-1.5,33.3-2.3,20,5.4C0.9,16.4-5.7,40.9,5.4,60c11,19.1,35.5,25.7,54.6,14.6c19.1-11,25.7-35.5,14.6-54.6C74.6,20,74.6,19.9,74.6,19.9z"/></svg>');
fill: rgba(197, 195,200, 1);
filter: drop-shadow(0 0 30px rgba(255, 199, 31, 1));
}
.stop:hover {
cursor:pointer;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 28.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Calque_6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="11.7134" y1="68.2866" x2="76.5712" y2="3.4288"><stop offset="0" style="stop-color:%2352193e"/><stop offset="1" style="stop-color:%23521b38"/></linearGradient><path fill="url(%23SVGID_1_)" d="M74.6,19.9c0.7-0.4,1.4-0.8,2.1-1.4c4.1-3.7,4.5-10,0.9-14.1s-10-4.5-14.1-0.9c-0.9,0.8-1.6,1.7-2.1,2.6C49.1-1.5,33.3-2.3,20,5.4C0.9,16.4-5.7,40.9,5.4,60c11,19.1,35.5,25.7,54.6,14.6c19.1-11,25.7-35.5,14.6-54.6C74.6,20,74.6,19.9,74.6,19.9z"/></svg>');
fill: rgba(197, 195,200, 1);
filter: drop-shadow(0 0 60px rgba(255, 199, 31, 1));
}
</style>
<script>
const video = document.getElementById("BAVideo");
function playVideo() {
video.play();
}
function stopVideo() {
video.pause();
}
</script>
vidéo alpha verticale bouton svg
vidéo alpha verticale bouton svg
Code à copier et à intégrer <> dans votre page de site Google ⬇️
<div class="container-txt">
<h1>
<span>Time</span>
<span>is</span>
<span>money,</span>
<span>so</span>
<span>Time</span>
<span>travel</span>
<span>is</span>
<span>a</span>
<span>waste</span>
<span>of</span>
<span>Time.</span>
</h1>
</div>
<div class="container">
<div>
<div class="container-video-v-0">
<video id="video0" class="first-video" poster="https://just2dance.com/wp-content/uploads/2024/03/delorean-redplanet.jpg" src="https://va.media.tumblr.com/tumblr_s8nag94cZu1qgac6v.mp4">
</video>
</div>
</div>
<div>
<!-- -->
<div class="container-video-v-1">
<video id="video1" poster="https://just2dance.com/wp-content/uploads/2024/03/solarsystem-16-scaled.jpg" src="https://va.media.tumblr.com/tumblr_s9w7vikaCx1qgac6v_720.mp4">
</video>
</div>
</div>
<div>
<div class="container-video-v-2">
<video id="video2" poster="https://just2dance.com/wp-content/uploads/2024/03/delorean-astroport.jpg" src="https://va.media.tumblr.com/tumblr_s8n9crEezR1qgac6v.mp4">
</video>
</div>
</div>
</div>
<div class="container">
<div>
<div class="container-video-h">
<video id="video3" poster="https://just2dance.com/wp-content/uploads/2024/03/delorean-secret-base.jpg" src="https://va.media.tumblr.com/tumblr_s8nga7VjGa1qgac6v.mp4">
</video>
</div>
</div>
</div>
<style>
@import url("https://fonts.googleapis.com/css2?family=Caprasimo&display=swap");
*,
: : before, : : after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #040f06;
background-size: cover;
background-repeat: no-repeat;
background-image: url("");
}
.container {
background-color: ;
margin: 30px auto;
display: grid;
grid-template-rows: repeat(2, 100%);
grid-template-columns: repeat(auto-fit, minmax(33.333%, 1fr));
grid-auto-rows: 100%;
width: 90%;
}
.container-txt {
margin: 30px auto;
text-align: center;
}
h1 {
font-size: 48px;
color: whitesmoke;
font-family: "Caprasimo", serif;
font-weight: 400;
font-style: normal;
transform: scale(0.94);
animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
@keyframes scale {
100% {
transform: scale(1);
}
}
span {
display: inline-block;
opacity: 0;
filter: blur(4px);
}
span:nth-child(1) {
animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(2) {
animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(3) {
animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(4) {
animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(5) {
animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(6) {
animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(7) {
animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(8) {
animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(9) {
animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(10) {
animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(11) {
animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(12) {
animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(13) {
animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(14) {
animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(15) {
animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(16) {
animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(17) {
animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(18) {
animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
@keyframes fade-in {
100% {
opacity: 1;
filter: blur(0);
}
}
.container-video-v-0 {
margin: 0 auto;
width: 96%;
height: 96%;
border-radius: 26px;
background: linear-gradient(#f2e7bb, #fcf7e1);
border: 3px solid #040f06;
}
.container-video-v-1 {
margin: 0 auto;
width: 96%;
height: 96%;
border-radius: 26px;
background: linear-gradient(#322f3d, #010f47);
border: 3px solid #040f06;
}
.container-video-v-2 {
margin: 0 auto;
width: 96%;
height: 96%;
border-radius: 26px;
background: linear-gradient(#9690ab, #b1a8d1);
border: 3px solid #040f06;
}
.container-video-h {
margin: 0 auto;
width: 99%;
height: 99%;
border-radius: 26px;
background: linear-gradient(#784110, #d96b0a);
border: 3px solid #040f06;
}
.first-video {
cursor: pointer;
}
video {
object-fit: cover;
border: ;
width: 100%;
height: 100%;
opacity: 80%;
border-radius: 20px;
mix-blend-mode: luminosity;
}
</style>
<script>
const video1 = document.getElementById("video1");
const video2 = document.getElementById("video2");
const video3 = document.getElementById("video3");
const video = document.getElementById("video0");
video.addEventListener("click", function () {
// Jouer la vidéo
if (video.paused) {
video.play();
} else {
video.pause();
}
// Écouter la fin de la première vidéo
video0.addEventListener("ended", function () {
// Démarrer la deuxième vidéo
video1.play();
// Écouter la fin de la deuxième vidéo
video1.addEventListener("ended", function () {
// Démarrer la deuxième vidéo
video2.play();
// Écouter la fin de la troisieme vidéo
video2.addEventListener("ended", function () {
// Démarrer la deuxième vidéo
video3.play();
// Écouter la fin de la deuxième vidéo
video3.addEventListener("ended", function () {
// Revenir à la première vidéo
video0.currentTime = 0;
video0.play();
});
});
});
});
});
</script>
4 vidéos séquentiels
4 vidéos séquentiels
Code à copier et à intégrer <> dans votre page de site Google ⬇️
<div class="container-txt">
<h1>
<span>Time</span>
<span>is</span>
<span>money,</span>
<span>get</span>
<span>rich</span>
<span>travel</span>
<span>back</span>
<span>in</span>
<span>Time</span>
</h1>
</div>
<div class="container">
<div>
<div class="container-video-v-0">
<video id="video0" class="first-video" poster="https://just2dance.com/wp-content/uploads/2024/03/delorean-redplanet.jpg" src="https://va.media.tumblr.com/tumblr_s8nag94cZu1qgac6v.mp4">
</video>
</div>
</div>
<div>
<!-- -->
<div class="container-video-v-1">
<video id="video1" poster="https://just2dance.com/wp-content/uploads/2024/03/solarsystem-16-scaled.jpg" src="https://va.media.tumblr.com/tumblr_s9w7vikaCx1qgac6v_720.mp4">
</video>
</div>
</div>
<div>
<div class="container-video-v-2">
<video id="video2" poster="https://just2dance.com/wp-content/uploads/2024/03/delorean-astroport.jpg" src="https://va.media.tumblr.com/tumblr_s8n9crEezR1qgac6v.mp4">
</video>
</div>
</div>
</div>
<div class="container">
<div>
<div class="container-video-h">
<video id="video3" poster="https://just2dance.com/wp-content/uploads/2024/03/delorean-secret-base.jpg" src="https://va.media.tumblr.com/tumblr_s8nga7VjGa1qgac6v.mp4">
</video>
</div>
</div>
</div>
<style>
@import url("https://fonts.googleapis.com/css2?family=Caprasimo&display=swap");
*,
: : before, : : after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #000b25;
background-size: cover;
background-repeat: no-repeat;
background-image: url("");
}
.container {
background-color: ;
margin: 30px auto;
display: grid;
grid-template-rows: repeat(2, 100%);
grid-template-columns: repeat(auto-fit, minmax(33.333%, 1fr));
grid-auto-rows: 100%;
width: 80%;
}
.container-txt {
margin: 30px auto;
text-align: center;
}
h1 {
font-size: 48px;
color: whitesmoke;
font-family: "Caprasimo", serif;
font-weight: 400;
font-style: normal;
transform: scale(0.94);
animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
@keyframes scale {
100% {
transform: scale(1);
}
}
span {
display: inline-block;
opacity: 0;
filter: blur(4px);
}
span:nth-child(1) {
animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(2) {
animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(3) {
animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(4) {
animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(5) {
animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(6) {
animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(7) {
animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(8) {
animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(9) {
animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(10) {
animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(11) {
animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(12) {
animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(13) {
animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(14) {
animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(15) {
animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(16) {
animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(17) {
animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
span:nth-child(18) {
animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
@keyframes fade-in {
100% {
opacity: 1;
filter: blur(0);
}
}
.container-video-v-0 {
margin: 0 auto;
width: 96%;
height: 96%;
border-radius: 26px;
background: linear-gradient(#f2e7bb, #fcf7e1);
border: 3px solid #000b25;
}
.container-video-v-1 {
margin: 0 auto;
width: 96%;
height: 96%;
border-radius: 26px;
background: linear-gradient(#322f3d, #010f47);
border: 3px solid #000b25;
}
.container-video-v-2 {
margin: 0 auto;
width: 96%;
height: 96%;
border-radius: 26px;
background: linear-gradient(#9690ab, #b1a8d1);
border: 3px solid #000b25;
}
.container-video-h {
margin: 0 auto;
width: 99%;
height: 99%;
border-radius: 26px;
background: linear-gradient(#784110, #d96b0a);
border: 3px solid #000b25;
}
.first-video {
cursor: pointer;
}
video {
object-fit: cover;
border: ;
width: 100%;
height: 100%;
opacity: 100%;
border-radius: 20px;
mix-blend-mode: ;
}
</style>
<script>
const video1 = document.getElementById("video1");
const video2 = document.getElementById("video2");
const video3 = document.getElementById("video3");
const video = document.getElementById("video0");
video.addEventListener("click", function () {
// Jouer la vidéo
if (video.paused) {
video.play();
} else {
video.pause();
}
// Écouter la fin de la première vidéo
video0.addEventListener("ended", function () {
// Démarrer la deuxième vidéo
video1.play();
// Écouter la fin de la deuxième vidéo
video1.addEventListener("ended", function () {
// Démarrer la deuxième vidéo
video2.play();
// Écouter la fin de la troisieme vidéo
video2.addEventListener("ended", function () {
// Démarrer la deuxième vidéo
video3.play();
// Écouter la fin de la deuxième vidéo
video3.addEventListener("ended", function () {
// Revenir à la première vidéo
video0.currentTime = 0;
video0.play();
});
});
});
});
});
</script>
code video
code video
Integration vidéo en HTML
Integration vidéo en HTML
<div class="container">
<div class="container-video">
<video id="BAVideo" src="https://v.ftcdn.net/06/59/68/78/700_F_659687885_GnPyE7Y3DIdWABktBDOqiRKsq8ABUnjl_ST.mp4" width="320" height="auto"></video>
</div>
<div class="command">
<div class="button-play">
<div class="before-play">
<div class="play" >
<svg version="1.0" id="playButton" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" onclick="playVideo()" viewBox="0 0 80px 80px" enable-background="new 0 0 80 80" xml:space="preserve">
<g>
<path fill="#FF0000" d="M46.5,39.2c-0.1-0.2-0.3-0.2-0.4-0.2c-0.3,0-0.5,0.3-0.7,0.8c0,0.1-0.1,0.3-0.3,0.8
c-0.3,0.8-0.5,1.3-0.5,1.4c0,0.2,0.2,0.3,0.5,0.3h2.3c0.4,0,0.6-0.1,0.6-0.3c0-0.3-0.3-0.9-0.9-1.9C46.8,39.7,46.6,39.4,46.5,39.2z" />
<path fill="#FF0000" d="M14.2,35.3c-0.6,0-0.9,0.2-0.9,0.5v4c0,0.3,0.1,0.5,0.2,0.6c0.2,0.1,0.5,0.2,0.9,0.2c0.5,0,0.9-0.1,1.3-0.4
c0.5-0.4,0.8-1.1,0.8-2.1c0-1-0.3-1.8-0.9-2.2C15.2,35.5,14.7,35.3,14.2,35.3z" />
<path fill="#FF0000" d="M40,0C17.9,0,0,17.9,0,40c0,22.1,17.9,40,40,40s40-17.9,40-40C80,17.9,62.1,0,40,0z M19.9,41.8
c-1.1,0.9-2.5,1.3-4.2,1.3c-0.4,0-0.9,0-1.5-0.1c-0.3,0-0.5,0-0.6,0c-0.2,0-0.3,0.1-0.3,0.4v0.1l0.1,1.9c0,0.4,0.1,0.7,0.2,0.8
s0.4,0.4,0.7,0.6c0.5,0.3,0.8,0.6,0.8,0.9c0,0.5-0.4,0.9-1.1,1.1s-1.8,0.4-3.2,0.4c-2.9,0-4.3-0.5-4.3-1.5c0-0.2,0.1-0.4,0.2-0.5
s0.4-0.3,0.9-0.5C7.7,46.5,7.9,46.3,8,46s0.1-1.1,0.1-2.6v-6.2c0-0.8-0.1-1.3-0.2-1.5S7.5,35.4,7,35.3c-0.7-0.2-1.1-0.6-1.1-1.1
c0-0.4,0.1-0.6,0.4-0.8s0.7-0.3,1.3-0.3c0.2,0,0.7,0,1.4,0h0.7c1.3,0,2.1,0,2.3,0s1-0.1,2.4-0.2c0.5,0,0.9-0.1,1.2-0.1
c1.3,0,2.4,0.3,3.4,0.8c1.7,0.9,2.6,2.3,2.6,4.3C21.7,39.5,21.1,40.8,19.9,41.8z M36.3,48.4c-0.2,0.4-0.4,0.6-0.6,0.7
s-0.4,0.2-0.6,0.2L32.5,49h-8.2c-0.5,0-0.9-0.1-1.1-0.2c-0.3-0.2-0.5-0.4-0.5-0.8c0-0.2,0.1-0.4,0.2-0.5s0.4-0.3,0.8-0.5
c0.4-0.2,0.7-0.5,0.9-0.9c0.1-0.3,0.2-1.3,0.2-2.8c0-0.7,0-1.8-0.1-3.1c0-1.3-0.1-2.3-0.1-2.9c0-0.6,0-1.1-0.1-1.3
s-0.3-0.4-0.6-0.5c-0.5-0.2-0.8-0.3-1-0.4c-0.2-0.2-0.4-0.4-0.4-0.7c0-0.6,0.5-1,1.4-1.3c0.8-0.3,1.9-0.4,3.2-0.4
c1.5,0,2.6,0.1,3.4,0.2c1,0.2,1.5,0.6,1.5,1.3c0,0.3-0.1,0.4-0.2,0.6s-0.4,0.3-0.9,0.5c-0.3,0.1-0.5,0.4-0.6,0.7S30,37,30,38.1v5.4
c0,1.2,0.1,2,0.3,2.3c0.3,0.4,0.8,0.6,1.6,0.6c0.9,0,1.6-0.2,2.1-0.6s0.9-1,1.1-1.8c0.1-0.5,0.4-0.8,0.8-0.8s0.8,0.2,1,0.6
s0.4,0.9,0.4,1.4C37.4,46.2,37,47.3,36.3,48.4z M56.4,48.8c-0.7,0.2-1.8,0.4-3.4,0.4c-1.8,0-3.1-0.1-3.9-0.2
c-0.4-0.1-0.7-0.2-0.9-0.4s-0.3-0.5-0.3-0.8c0-0.2,0.1-0.4,0.2-0.5s0.3-0.2,0.7-0.4c0.4-0.1,0.6-0.3,0.6-0.6c0-0.5-0.3-0.8-0.9-0.9
c-0.7-0.1-1.6-0.1-2.9-0.1c-1,0-1.7,0.1-1.9,0.2c-0.1,0.1-0.2,0.2-0.3,0.4s-0.1,0.4-0.1,0.6c0,0.2,0,0.3,0.1,0.3s0.3,0.1,0.7,0.3
c0.5,0.1,0.7,0.4,0.7,0.8c0,0.9-1.1,1.4-3.3,1.4c-1.3,0-2.2-0.1-2.8-0.3c-0.5-0.2-0.8-0.5-0.8-1.1c0-0.2,0.1-0.4,0.2-0.6
s0.3-0.3,0.7-0.4c0.5-0.2,0.9-0.4,1.2-0.8s0.6-1,1.1-2.1l1.7-3.6c0.6-1.3,1-2.3,1.2-3s0.3-1.3,0.3-1.9c0-0.7,0-1.1,0.1-1.4
s0.2-0.5,0.5-0.8c0.5-0.5,1.2-0.8,2.1-0.8c0.8,0,1.5,0.3,2.3,0.9c1,0.8,2.5,3.3,4.4,7.4l2.2,4.7c0.2,0.4,0.4,0.7,0.5,0.9
s0.4,0.2,0.6,0.3c0.6,0.1,0.8,0.4,0.8,0.9C57.4,48.2,57.1,48.6,56.4,48.8z M73.3,35.2c-0.4,0.1-0.8,0.3-1.2,0.5s-0.9,0.8-1.8,1.8
c-1.1,1.1-1.7,2-2,2.5S68,41.4,68,42.4c0,0.9,0,1.7,0.1,2.5c0,0.5,0.1,0.8,0.2,1s0.3,0.4,0.7,0.5c0.6,0.3,0.9,0.7,0.9,1.1
c0,1.1-1.6,1.6-4.7,1.6c-1.3,0-2.5-0.1-3.7-0.4c-1-0.2-1.5-0.6-1.5-1.3c0-0.5,0.3-0.8,0.9-1c0.4-0.2,0.7-0.4,0.8-0.6
c0.2-0.5,0.4-1.8,0.4-3.8c0-0.6-0.1-1.1-0.2-1.5s-0.4-0.8-0.8-1.4c-0.9-1.1-1.8-2.2-2.7-3.1c-0.4-0.4-0.8-0.7-1.2-0.8
c-0.5-0.2-0.9-0.3-1-0.4c-0.2-0.2-0.3-0.4-0.3-0.8c0-0.5,0.4-0.9,1.2-1.1s2.1-0.3,4-0.3c1.5,0,2.7,0.1,3.5,0.2
c0.4,0.1,0.7,0.2,0.9,0.4s0.3,0.4,0.3,0.7c0,0.2-0.1,0.4-0.3,0.6c-0.2,0.3-0.4,0.6-0.4,0.7c0,0.3,0.2,0.7,0.7,1.3
c0.3,0.4,0.6,0.6,0.8,0.6c0.2,0,0.3-0.1,0.5-0.2s0.4-0.3,0.6-0.7c0.3-0.4,0.5-0.7,0.5-0.9c0-0.1,0-0.2-0.1-0.3s-0.2-0.2-0.4-0.5
c-0.2-0.2-0.2-0.4-0.2-0.7c0-0.9,1.2-1.3,3.6-1.3c1.4,0,2.2,0.1,2.6,0.2c0.3,0.1,0.5,0.2,0.6,0.4s0.3,0.5,0.3,0.7
c0,0.3-0.1,0.6-0.3,0.7S73.8,35.1,73.3,35.2z" />
</g>
</svg>
</div>
</div>
</div>
<div class="button-stop">
<div class="before-stop">
<div class="stop" ></div>
<svg version="1.0" class="stop" id="stopButton" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="-0px" y="0px" onclick="stopVideo()" viewBox="0 0 80px 80px" enable-background="new 0 0 80 80" xml:space="preserve">
<g>
<path d="M9.6,33.4c-0.6,0-0.9,0.2-0.9,0.5v4c0,0.3,0.1,0.5,0.2,0.6c0.2,0.1,0.5,0.2,0.9,0.2c0.5,0,0.9-0.1,1.3-0.4
c0.5-0.4,0.8-1.1,0.8-2.1c0-1-0.3-1.8-0.9-2.2C10.5,33.6,10.1,33.4,9.6,33.4z" />
<path d="M22.7,37.3c-0.1-0.2-0.3-0.2-0.4-0.2c-0.3,0-0.5,0.3-0.7,0.8c0,0.1-0.1,0.3-0.3,0.8c-0.3,0.8-0.5,1.3-0.5,1.4
c0,0.2,0.2,0.3,0.5,0.3h2.3c0.4,0,0.6-0.1,0.6-0.3c0-0.3-0.3-0.9-0.9-1.9C23,37.8,22.8,37.5,22.7,37.3z" />
<path d="M40,0C17.9,0,0,17.9,0,40c0,22.1,17.9,40,40,40s40-17.9,40-40C80,17.9,62.1,0,40,0z M11.1,41.2c-0.4,0-0.9,0-1.5-0.1
c-0.3,0-0.5,0-0.6,0c-0.2,0-0.3,0.1-0.3,0.4v0.1l0.1,1.9c0,0.4,0.1,0.7,0.2,0.8s0.4,0.4,0.7,0.6c0.5,0.3,0.8,0.6,0.8,0.9
c0,0.5-0.4,0.9-1.1,1.1s-1.8,0.4-3.2,0.4c-2.9,0-4.3-0.5-4.3-1.5c0-0.2,0.1-0.4,0.2-0.5s0.4-0.3,0.9-0.5c0.3-0.1,0.4-0.4,0.5-0.6
s0.1-1.1,0.1-2.6v-6.2c0-0.8-0.1-1.3-0.2-1.5s-0.4-0.4-0.9-0.5c-0.7-0.2-1.1-0.6-1.1-1.1c0-0.4,0.1-0.6,0.4-0.8s0.7-0.3,1.3-0.3
c0.2,0,0.7,0,1.4,0h0.7c1.3,0,2.1,0,2.3,0s1-0.1,2.4-0.2c0.5,0,0.9-0.1,1.2-0.1c1.3,0,2.4,0.3,3.4,0.8c1.7,0.9,2.6,2.3,2.6,4.3
c0,1.6-0.6,2.9-1.8,3.8C14.1,40.7,12.7,41.2,11.1,41.2z M32.6,46.9c-0.7,0.2-1.8,0.4-3.4,0.4c-1.8,0-3.1-0.1-3.9-0.2
c-0.4-0.1-0.7-0.2-0.9-0.4S24,46.2,24,45.9c0-0.2,0.1-0.4,0.2-0.5s0.3-0.2,0.7-0.4c0.4-0.1,0.6-0.3,0.6-0.6c0-0.5-0.3-0.8-0.9-0.9
c-0.7-0.1-1.6-0.1-2.9-0.1c-1,0-1.7,0.1-1.9,0.2c-0.1,0.1-0.2,0.2-0.3,0.4s-0.1,0.4-0.1,0.6c0,0.2,0,0.3,0.1,0.3s0.3,0.1,0.7,0.3
c0.5,0.1,0.7,0.4,0.7,0.8c0,0.9-1.1,1.4-3.3,1.4c-1.3,0-2.2-0.1-2.8-0.3c-0.5-0.2-0.8-0.5-0.8-1.1c0-0.2,0.1-0.4,0.2-0.6
s0.3-0.3,0.7-0.4c0.5-0.2,0.9-0.4,1.2-0.8s0.6-1,1.1-2.1l1.7-3.6c0.6-1.3,1-2.3,1.2-3s0.3-1.3,0.3-1.9c0-0.7,0-1.1,0.1-1.4
s0.2-0.5,0.5-0.8c0.5-0.5,1.2-0.8,2.1-0.8c0.8,0,1.5,0.3,2.3,0.9c1,0.8,2.5,3.3,4.4,7.4l2.2,4.7c0.2,0.4,0.4,0.7,0.5,0.9
s0.4,0.2,0.6,0.3c0.6,0.1,0.8,0.4,0.8,0.9C33.6,46.3,33.3,46.7,32.6,46.9z M48.6,33.9c-0.1,0.3-0.1,1.3-0.1,3v2.9
c0,1.7-0.1,2.9-0.4,3.7c-0.6,1.5-1.8,2.6-3.7,3.3c-1.1,0.4-2.4,0.6-3.9,0.6c-2.5,0-4.5-0.6-6-1.8c-0.7-0.6-1.2-1.3-1.5-2
s-0.4-1.9-0.4-3.4c0-0.6,0-1.5,0.1-2.8c0-0.9,0-1.5,0-1.8c0-0.6,0-1.1-0.1-1.3s-0.3-0.5-0.6-0.7c-0.5-0.3-0.8-0.7-0.8-1.1
c0-0.3,0.1-0.6,0.4-0.8s0.6-0.4,1-0.5c0.9-0.2,1.9-0.3,3-0.3c1.3,0,2.4,0.1,3.2,0.3c0.8,0.2,1.3,0.6,1.3,1.3c0,0.3-0.1,0.6-0.4,0.8
c-0.1,0-0.3,0.2-0.7,0.4c-0.2,0.1-0.4,0.3-0.5,0.6s-0.1,0.8-0.1,1.4c0,0.7,0,2.1-0.1,4.4c0,1.3,0.3,2.4,1.1,3.1
c0.6,0.6,1.4,0.9,2.4,0.9c0.6,0,1.2-0.1,1.7-0.3s0.9-0.5,1.2-0.9c0.2-0.3,0.4-0.6,0.4-1s0.1-0.9,0.1-1.5v-2.6c0-2-0.1-3.1-0.2-3.5
s-0.3-0.6-0.8-0.8c-0.4-0.2-0.7-0.3-0.8-0.5s-0.2-0.3-0.2-0.6c0-0.5,0.3-0.8,0.8-1s1.5-0.3,2.7-0.3c1.2,0,2.1,0.1,2.6,0.3
s0.8,0.5,0.8,1c0,0.2,0,0.4-0.1,0.5s-0.3,0.3-0.7,0.5C48.9,33.4,48.7,33.6,48.6,33.9z M61.7,45.8c-1.4,1.1-3.2,1.6-5.4,1.6
c-1,0-2.1-0.1-3.2-0.4s-1.9-0.5-2.4-0.8c-0.4-0.2-0.7-0.8-1-1.6s-0.5-1.7-0.5-2.5c0-0.4,0.1-0.7,0.2-0.9c0.2-0.2,0.4-0.4,0.7-0.4
s0.6,0.2,0.9,0.5c0.2,0.2,0.6,0.7,1.2,1.7c0.3,0.4,0.7,0.8,1.4,1.1s1.3,0.4,2,0.4c0.6,0,1-0.1,1.4-0.3s0.5-0.5,0.5-0.8
c0-0.3-0.1-0.6-0.4-0.8s-0.7-0.4-1.4-0.6c-1.1-0.4-2-0.7-2.6-1s-1.1-0.7-1.6-1.1c-1.2-1.1-1.9-2.3-1.9-3.7c0-0.7,0.2-1.4,0.5-2
s0.8-1.2,1.4-1.7c1.3-1.1,2.9-1.7,4.8-1.7c0.8,0,1.9,0.2,3.2,0.6c0.2,0,0.3,0.1,0.4,0.1c0.1,0,0.3-0.1,0.7-0.2
c0.1,0,0.3-0.1,0.4-0.1c0.5,0,1.1,0.4,1.7,1.2s0.9,1.6,0.9,2.4c0,0.4-0.1,0.8-0.4,1.1s-0.6,0.5-1,0.5c-0.3,0-0.6-0.1-0.8-0.2
s-0.6-0.5-1.3-1.1c-0.9-0.9-1.9-1.3-2.8-1.3c-0.4,0-0.8,0.1-1,0.3s-0.4,0.5-0.4,0.8c0,0.7,0.6,1.2,1.8,1.5c1.6,0.5,2.7,0.8,3.1,1
c2,1,3,2.4,3,4.3C63.8,43.3,63.1,44.7,61.7,45.8z M77.6,46.6c-0.2,0.3-0.3,0.4-0.4,0.5s-0.3,0.1-0.4,0.1c-0.1,0-0.4,0-0.6-0.1
c-0.5-0.1-1.2-0.2-2-0.2h-9.9c-0.4,0-0.7-0.1-0.9-0.3s-0.3-0.4-0.3-0.7c0-0.2,0-0.4,0.1-0.5s0.3-0.2,0.6-0.4
c0.2-0.1,0.4-0.2,0.5-0.4s0.2-0.4,0.3-0.7c0.3-1.2,0.4-2.8,0.4-4.8c0-3-0.2-4.9-0.6-5.7c-0.1-0.2-0.2-0.3-0.3-0.3s-0.3-0.1-0.6-0.2
c-0.4-0.1-0.7-0.4-0.7-0.9c0-0.2,0.1-0.5,0.2-0.7s0.3-0.3,0.6-0.4c0.3-0.1,0.9-0.1,1.8-0.1h6c1.2,0,2.1,0,2.7-0.1s1.1-0.2,1.6-0.3
c0.2,0,0.3-0.1,0.4-0.1c0.4,0,0.8,0.2,1.1,0.7c0.5,0.7,0.8,1.6,0.8,2.6c0,0.5-0.1,0.9-0.3,1.2s-0.5,0.4-0.9,0.4
c-0.3,0-0.5-0.1-0.6-0.2s-0.3-0.3-0.6-0.7c-0.3-0.5-0.8-0.9-1.3-1s-1.4-0.3-2.6-0.3c-0.9,0-1.4,0.2-1.6,0.5
c-0.1,0.2-0.2,0.4-0.2,0.7s0,1,0,2.2c0,0.5,0.1,0.8,0.2,0.9s0.6,0.2,1.2,0.2c0.3,0,0.6-0.1,0.7-0.2s0.2-0.4,0.3-0.7
c0.1-0.5,0.1-0.8,0.2-0.9s0.2-0.3,0.3-0.4c0.2-0.1,0.4-0.2,0.6-0.2c0.3,0,0.6,0.2,0.8,0.5c0.2,0.2,0.3,0.6,0.4,1.2s0.2,1.2,0.2,1.8
c0,1.2-0.2,2.2-0.6,3c-0.2,0.4-0.5,0.6-1,0.6c-0.3,0-0.4-0.1-0.6-0.2s-0.2-0.4-0.2-0.8c-0.1-0.9-0.6-1.3-1.5-1.3
c-0.4,0-0.6,0.1-0.7,0.3s-0.2,0.6-0.2,1.2c0,0.4,0,0.8,0.1,1.4s0.1,1,0.2,1.2c0.1,0.2,0.3,0.4,0.6,0.5s0.9,0.1,1.6,0.1
c1.2,0,2.1-0.2,2.6-0.5s1.1-0.8,1.5-1.6c0.2-0.5,0.4-0.8,0.6-0.9s0.4-0.2,0.7-0.2c0.3,0,0.6,0.1,0.8,0.4s0.3,0.6,0.3,1.1
c0,0.5-0.1,1.1-0.4,1.8S77.9,46.1,77.6,46.6z" />
</g>
</svg>
</div>
</div>
</div>
</div>
<style>
body {
background-color: ;
}
video {
max-width:100%;
height:auto;
border-radius: 160px;
}
.container {
width:100%;
max-width: 80%;
min-width: fit-content;
background-color: ;
margin: 0 auto;
}
.container-video {
margin: 0 auto;
min-width: max-content;
max-width: fit-content;
height: auto;
}
.command {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 40px;
width: 100%;
}
.button-play {
width: 100%;
height: 100px;
}
.button-stop {
width: 100%;
height: 100px;
}
.before-play {
width: 80px;
height: 100px;
margin: 2% 0 2% auto;
padding-right: 10px;
}
.before-stop {
width: 80px;
height: 100px;
margin: 2% 2% 2% 0;
padding-left: 10px;
}
.play {
}
.stop {
fill: blue;
}
</style>
<script>
const video = document.getElementById("BAVideo");
function playVideo() {
video.play();
}
function stopVideo() {
video.pause();
}
</script>
Code vidéo 1
Code vidéo 1
<div>
<div>
<video id="BAVideo" src="https://va.media.tumblr.com/tumblr_s7ew7lMARR1qgac6v_720.mp4" width="600" height="600"></video>
</div>
<div style=" display: flex; align-items: flex-start; justify-content: space-between; max-width:fit-content; padding-top: 20px;">
<div>
<div>
<svg version="1.0" style="margin-left: 70%;" id="playButton" style="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" onclick="playVideo()"
viewBox="0 0 80px 80px" enable-background="new 0 0 80 80" xml:space="preserve">
<g>
<path fill="#FF0000" d="M46.5,39.2c-0.1-0.2-0.3-0.2-0.4-0.2c-0.3,0-0.5,0.3-0.7,0.8c0,0.1-0.1,0.3-0.3,0.8
c-0.3,0.8-0.5,1.3-0.5,1.4c0,0.2,0.2,0.3,0.5,0.3h2.3c0.4,0,0.6-0.1,0.6-0.3c0-0.3-0.3-0.9-0.9-1.9C46.8,39.7,46.6,39.4,46.5,39.2z"/>
<path fill="#FF0000" d="M14.2,35.3c-0.6,0-0.9,0.2-0.9,0.5v4c0,0.3,0.1,0.5,0.2,0.6c0.2,0.1,0.5,0.2,0.9,0.2c0.5,0,0.9-0.1,1.3-0.4
c0.5-0.4,0.8-1.1,0.8-2.1c0-1-0.3-1.8-0.9-2.2C15.2,35.5,14.7,35.3,14.2,35.3z"/>
<path fill="#FF0000" d="M40,0C17.9,0,0,17.9,0,40c0,22.1,17.9,40,40,40s40-17.9,40-40C80,17.9,62.1,0,40,0z M19.9,41.8
c-1.1,0.9-2.5,1.3-4.2,1.3c-0.4,0-0.9,0-1.5-0.1c-0.3,0-0.5,0-0.6,0c-0.2,0-0.3,0.1-0.3,0.4v0.1l0.1,1.9c0,0.4,0.1,0.7,0.2,0.8
s0.4,0.4,0.7,0.6c0.5,0.3,0.8,0.6,0.8,0.9c0,0.5-0.4,0.9-1.1,1.1s-1.8,0.4-3.2,0.4c-2.9,0-4.3-0.5-4.3-1.5c0-0.2,0.1-0.4,0.2-0.5
s0.4-0.3,0.9-0.5C7.7,46.5,7.9,46.3,8,46s0.1-1.1,0.1-2.6v-6.2c0-0.8-0.1-1.3-0.2-1.5S7.5,35.4,7,35.3c-0.7-0.2-1.1-0.6-1.1-1.1
c0-0.4,0.1-0.6,0.4-0.8s0.7-0.3,1.3-0.3c0.2,0,0.7,0,1.4,0h0.7c1.3,0,2.1,0,2.3,0s1-0.1,2.4-0.2c0.5,0,0.9-0.1,1.2-0.1
c1.3,0,2.4,0.3,3.4,0.8c1.7,0.9,2.6,2.3,2.6,4.3C21.7,39.5,21.1,40.8,19.9,41.8z M36.3,48.4c-0.2,0.4-0.4,0.6-0.6,0.7
s-0.4,0.2-0.6,0.2L32.5,49h-8.2c-0.5,0-0.9-0.1-1.1-0.2c-0.3-0.2-0.5-0.4-0.5-0.8c0-0.2,0.1-0.4,0.2-0.5s0.4-0.3,0.8-0.5
c0.4-0.2,0.7-0.5,0.9-0.9c0.1-0.3,0.2-1.3,0.2-2.8c0-0.7,0-1.8-0.1-3.1c0-1.3-0.1-2.3-0.1-2.9c0-0.6,0-1.1-0.1-1.3
s-0.3-0.4-0.6-0.5c-0.5-0.2-0.8-0.3-1-0.4c-0.2-0.2-0.4-0.4-0.4-0.7c0-0.6,0.5-1,1.4-1.3c0.8-0.3,1.9-0.4,3.2-0.4
c1.5,0,2.6,0.1,3.4,0.2c1,0.2,1.5,0.6,1.5,1.3c0,0.3-0.1,0.4-0.2,0.6s-0.4,0.3-0.9,0.5c-0.3,0.1-0.5,0.4-0.6,0.7S30,37,30,38.1v5.4
c0,1.2,0.1,2,0.3,2.3c0.3,0.4,0.8,0.6,1.6,0.6c0.9,0,1.6-0.2,2.1-0.6s0.9-1,1.1-1.8c0.1-0.5,0.4-0.8,0.8-0.8s0.8,0.2,1,0.6
s0.4,0.9,0.4,1.4C37.4,46.2,37,47.3,36.3,48.4z M56.4,48.8c-0.7,0.2-1.8,0.4-3.4,0.4c-1.8,0-3.1-0.1-3.9-0.2
c-0.4-0.1-0.7-0.2-0.9-0.4s-0.3-0.5-0.3-0.8c0-0.2,0.1-0.4,0.2-0.5s0.3-0.2,0.7-0.4c0.4-0.1,0.6-0.3,0.6-0.6c0-0.5-0.3-0.8-0.9-0.9
c-0.7-0.1-1.6-0.1-2.9-0.1c-1,0-1.7,0.1-1.9,0.2c-0.1,0.1-0.2,0.2-0.3,0.4s-0.1,0.4-0.1,0.6c0,0.2,0,0.3,0.1,0.3s0.3,0.1,0.7,0.3
c0.5,0.1,0.7,0.4,0.7,0.8c0,0.9-1.1,1.4-3.3,1.4c-1.3,0-2.2-0.1-2.8-0.3c-0.5-0.2-0.8-0.5-0.8-1.1c0-0.2,0.1-0.4,0.2-0.6
s0.3-0.3,0.7-0.4c0.5-0.2,0.9-0.4,1.2-0.8s0.6-1,1.1-2.1l1.7-3.6c0.6-1.3,1-2.3,1.2-3s0.3-1.3,0.3-1.9c0-0.7,0-1.1,0.1-1.4
s0.2-0.5,0.5-0.8c0.5-0.5,1.2-0.8,2.1-0.8c0.8,0,1.5,0.3,2.3,0.9c1,0.8,2.5,3.3,4.4,7.4l2.2,4.7c0.2,0.4,0.4,0.7,0.5,0.9
s0.4,0.2,0.6,0.3c0.6,0.1,0.8,0.4,0.8,0.9C57.4,48.2,57.1,48.6,56.4,48.8z M73.3,35.2c-0.4,0.1-0.8,0.3-1.2,0.5s-0.9,0.8-1.8,1.8
c-1.1,1.1-1.7,2-2,2.5S68,41.4,68,42.4c0,0.9,0,1.7,0.1,2.5c0,0.5,0.1,0.8,0.2,1s0.3,0.4,0.7,0.5c0.6,0.3,0.9,0.7,0.9,1.1
c0,1.1-1.6,1.6-4.7,1.6c-1.3,0-2.5-0.1-3.7-0.4c-1-0.2-1.5-0.6-1.5-1.3c0-0.5,0.3-0.8,0.9-1c0.4-0.2,0.7-0.4,0.8-0.6
c0.2-0.5,0.4-1.8,0.4-3.8c0-0.6-0.1-1.1-0.2-1.5s-0.4-0.8-0.8-1.4c-0.9-1.1-1.8-2.2-2.7-3.1c-0.4-0.4-0.8-0.7-1.2-0.8
c-0.5-0.2-0.9-0.3-1-0.4c-0.2-0.2-0.3-0.4-0.3-0.8c0-0.5,0.4-0.9,1.2-1.1s2.1-0.3,4-0.3c1.5,0,2.7,0.1,3.5,0.2
c0.4,0.1,0.7,0.2,0.9,0.4s0.3,0.4,0.3,0.7c0,0.2-0.1,0.4-0.3,0.6c-0.2,0.3-0.4,0.6-0.4,0.7c0,0.3,0.2,0.7,0.7,1.3
c0.3,0.4,0.6,0.6,0.8,0.6c0.2,0,0.3-0.1,0.5-0.2s0.4-0.3,0.6-0.7c0.3-0.4,0.5-0.7,0.5-0.9c0-0.1,0-0.2-0.1-0.3s-0.2-0.2-0.4-0.5
c-0.2-0.2-0.2-0.4-0.2-0.7c0-0.9,1.2-1.3,3.6-1.3c1.4,0,2.2,0.1,2.6,0.2c0.3,0.1,0.5,0.2,0.6,0.4s0.3,0.5,0.3,0.7
c0,0.3-0.1,0.6-0.3,0.7S73.8,35.1,73.3,35.2z"/>
</g>
</svg>
</div>
</div>
<div style="max-width:120px; padding-left: 2%; max-height: 90px;">
<svg version="1.0" id="stopButton" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" onclick="stopVideo()" viewBox="0 0 80px 80px" enable-background="new 0 0 80 80" xml:space="preserve">
<g>
<path d="M9.6,33.4c-0.6,0-0.9,0.2-0.9,0.5v4c0,0.3,0.1,0.5,0.2,0.6c0.2,0.1,0.5,0.2,0.9,0.2c0.5,0,0.9-0.1,1.3-0.4
c0.5-0.4,0.8-1.1,0.8-2.1c0-1-0.3-1.8-0.9-2.2C10.5,33.6,10.1,33.4,9.6,33.4z"/>
<path d="M22.7,37.3c-0.1-0.2-0.3-0.2-0.4-0.2c-0.3,0-0.5,0.3-0.7,0.8c0,0.1-0.1,0.3-0.3,0.8c-0.3,0.8-0.5,1.3-0.5,1.4
c0,0.2,0.2,0.3,0.5,0.3h2.3c0.4,0,0.6-0.1,0.6-0.3c0-0.3-0.3-0.9-0.9-1.9C23,37.8,22.8,37.5,22.7,37.3z"/>
<path d="M40,0C17.9,0,0,17.9,0,40c0,22.1,17.9,40,40,40s40-17.9,40-40C80,17.9,62.1,0,40,0z M11.1,41.2c-0.4,0-0.9,0-1.5-0.1
c-0.3,0-0.5,0-0.6,0c-0.2,0-0.3,0.1-0.3,0.4v0.1l0.1,1.9c0,0.4,0.1,0.7,0.2,0.8s0.4,0.4,0.7,0.6c0.5,0.3,0.8,0.6,0.8,0.9
c0,0.5-0.4,0.9-1.1,1.1s-1.8,0.4-3.2,0.4c-2.9,0-4.3-0.5-4.3-1.5c0-0.2,0.1-0.4,0.2-0.5s0.4-0.3,0.9-0.5c0.3-0.1,0.4-0.4,0.5-0.6
s0.1-1.1,0.1-2.6v-6.2c0-0.8-0.1-1.3-0.2-1.5s-0.4-0.4-0.9-0.5c-0.7-0.2-1.1-0.6-1.1-1.1c0-0.4,0.1-0.6,0.4-0.8s0.7-0.3,1.3-0.3
c0.2,0,0.7,0,1.4,0h0.7c1.3,0,2.1,0,2.3,0s1-0.1,2.4-0.2c0.5,0,0.9-0.1,1.2-0.1c1.3,0,2.4,0.3,3.4,0.8c1.7,0.9,2.6,2.3,2.6,4.3
c0,1.6-0.6,2.9-1.8,3.8C14.1,40.7,12.7,41.2,11.1,41.2z M32.6,46.9c-0.7,0.2-1.8,0.4-3.4,0.4c-1.8,0-3.1-0.1-3.9-0.2
c-0.4-0.1-0.7-0.2-0.9-0.4S24,46.2,24,45.9c0-0.2,0.1-0.4,0.2-0.5s0.3-0.2,0.7-0.4c0.4-0.1,0.6-0.3,0.6-0.6c0-0.5-0.3-0.8-0.9-0.9
c-0.7-0.1-1.6-0.1-2.9-0.1c-1,0-1.7,0.1-1.9,0.2c-0.1,0.1-0.2,0.2-0.3,0.4s-0.1,0.4-0.1,0.6c0,0.2,0,0.3,0.1,0.3s0.3,0.1,0.7,0.3
c0.5,0.1,0.7,0.4,0.7,0.8c0,0.9-1.1,1.4-3.3,1.4c-1.3,0-2.2-0.1-2.8-0.3c-0.5-0.2-0.8-0.5-0.8-1.1c0-0.2,0.1-0.4,0.2-0.6
s0.3-0.3,0.7-0.4c0.5-0.2,0.9-0.4,1.2-0.8s0.6-1,1.1-2.1l1.7-3.6c0.6-1.3,1-2.3,1.2-3s0.3-1.3,0.3-1.9c0-0.7,0-1.1,0.1-1.4
s0.2-0.5,0.5-0.8c0.5-0.5,1.2-0.8,2.1-0.8c0.8,0,1.5,0.3,2.3,0.9c1,0.8,2.5,3.3,4.4,7.4l2.2,4.7c0.2,0.4,0.4,0.7,0.5,0.9
s0.4,0.2,0.6,0.3c0.6,0.1,0.8,0.4,0.8,0.9C33.6,46.3,33.3,46.7,32.6,46.9z M48.6,33.9c-0.1,0.3-0.1,1.3-0.1,3v2.9
c0,1.7-0.1,2.9-0.4,3.7c-0.6,1.5-1.8,2.6-3.7,3.3c-1.1,0.4-2.4,0.6-3.9,0.6c-2.5,0-4.5-0.6-6-1.8c-0.7-0.6-1.2-1.3-1.5-2
s-0.4-1.9-0.4-3.4c0-0.6,0-1.5,0.1-2.8c0-0.9,0-1.5,0-1.8c0-0.6,0-1.1-0.1-1.3s-0.3-0.5-0.6-0.7c-0.5-0.3-0.8-0.7-0.8-1.1
c0-0.3,0.1-0.6,0.4-0.8s0.6-0.4,1-0.5c0.9-0.2,1.9-0.3,3-0.3c1.3,0,2.4,0.1,3.2,0.3c0.8,0.2,1.3,0.6,1.3,1.3c0,0.3-0.1,0.6-0.4,0.8
c-0.1,0-0.3,0.2-0.7,0.4c-0.2,0.1-0.4,0.3-0.5,0.6s-0.1,0.8-0.1,1.4c0,0.7,0,2.1-0.1,4.4c0,1.3,0.3,2.4,1.1,3.1
c0.6,0.6,1.4,0.9,2.4,0.9c0.6,0,1.2-0.1,1.7-0.3s0.9-0.5,1.2-0.9c0.2-0.3,0.4-0.6,0.4-1s0.1-0.9,0.1-1.5v-2.6c0-2-0.1-3.1-0.2-3.5
s-0.3-0.6-0.8-0.8c-0.4-0.2-0.7-0.3-0.8-0.5s-0.2-0.3-0.2-0.6c0-0.5,0.3-0.8,0.8-1s1.5-0.3,2.7-0.3c1.2,0,2.1,0.1,2.6,0.3
s0.8,0.5,0.8,1c0,0.2,0,0.4-0.1,0.5s-0.3,0.3-0.7,0.5C48.9,33.4,48.7,33.6,48.6,33.9z M61.7,45.8c-1.4,1.1-3.2,1.6-5.4,1.6
c-1,0-2.1-0.1-3.2-0.4s-1.9-0.5-2.4-0.8c-0.4-0.2-0.7-0.8-1-1.6s-0.5-1.7-0.5-2.5c0-0.4,0.1-0.7,0.2-0.9c0.2-0.2,0.4-0.4,0.7-0.4
s0.6,0.2,0.9,0.5c0.2,0.2,0.6,0.7,1.2,1.7c0.3,0.4,0.7,0.8,1.4,1.1s1.3,0.4,2,0.4c0.6,0,1-0.1,1.4-0.3s0.5-0.5,0.5-0.8
c0-0.3-0.1-0.6-0.4-0.8s-0.7-0.4-1.4-0.6c-1.1-0.4-2-0.7-2.6-1s-1.1-0.7-1.6-1.1c-1.2-1.1-1.9-2.3-1.9-3.7c0-0.7,0.2-1.4,0.5-2
s0.8-1.2,1.4-1.7c1.3-1.1,2.9-1.7,4.8-1.7c0.8,0,1.9,0.2,3.2,0.6c0.2,0,0.3,0.1,0.4,0.1c0.1,0,0.3-0.1,0.7-0.2
c0.1,0,0.3-0.1,0.4-0.1c0.5,0,1.1,0.4,1.7,1.2s0.9,1.6,0.9,2.4c0,0.4-0.1,0.8-0.4,1.1s-0.6,0.5-1,0.5c-0.3,0-0.6-0.1-0.8-0.2
s-0.6-0.5-1.3-1.1c-0.9-0.9-1.9-1.3-2.8-1.3c-0.4,0-0.8,0.1-1,0.3s-0.4,0.5-0.4,0.8c0,0.7,0.6,1.2,1.8,1.5c1.6,0.5,2.7,0.8,3.1,1
c2,1,3,2.4,3,4.3C63.8,43.3,63.1,44.7,61.7,45.8z M77.6,46.6c-0.2,0.3-0.3,0.4-0.4,0.5s-0.3,0.1-0.4,0.1c-0.1,0-0.4,0-0.6-0.1
c-0.5-0.1-1.2-0.2-2-0.2h-9.9c-0.4,0-0.7-0.1-0.9-0.3s-0.3-0.4-0.3-0.7c0-0.2,0-0.4,0.1-0.5s0.3-0.2,0.6-0.4
c0.2-0.1,0.4-0.2,0.5-0.4s0.2-0.4,0.3-0.7c0.3-1.2,0.4-2.8,0.4-4.8c0-3-0.2-4.9-0.6-5.7c-0.1-0.2-0.2-0.3-0.3-0.3s-0.3-0.1-0.6-0.2
c-0.4-0.1-0.7-0.4-0.7-0.9c0-0.2,0.1-0.5,0.2-0.7s0.3-0.3,0.6-0.4c0.3-0.1,0.9-0.1,1.8-0.1h6c1.2,0,2.1,0,2.7-0.1s1.1-0.2,1.6-0.3
c0.2,0,0.3-0.1,0.4-0.1c0.4,0,0.8,0.2,1.1,0.7c0.5,0.7,0.8,1.6,0.8,2.6c0,0.5-0.1,0.9-0.3,1.2s-0.5,0.4-0.9,0.4
c-0.3,0-0.5-0.1-0.6-0.2s-0.3-0.3-0.6-0.7c-0.3-0.5-0.8-0.9-1.3-1s-1.4-0.3-2.6-0.3c-0.9,0-1.4,0.2-1.6,0.5
c-0.1,0.2-0.2,0.4-0.2,0.7s0,1,0,2.2c0,0.5,0.1,0.8,0.2,0.9s0.6,0.2,1.2,0.2c0.3,0,0.6-0.1,0.7-0.2s0.2-0.4,0.3-0.7
c0.1-0.5,0.1-0.8,0.2-0.9s0.2-0.3,0.3-0.4c0.2-0.1,0.4-0.2,0.6-0.2c0.3,0,0.6,0.2,0.8,0.5c0.2,0.2,0.3,0.6,0.4,1.2s0.2,1.2,0.2,1.8
c0,1.2-0.2,2.2-0.6,3c-0.2,0.4-0.5,0.6-1,0.6c-0.3,0-0.4-0.1-0.6-0.2s-0.2-0.4-0.2-0.8c-0.1-0.9-0.6-1.3-1.5-1.3
c-0.4,0-0.6,0.1-0.7,0.3s-0.2,0.6-0.2,1.2c0,0.4,0,0.8,0.1,1.4s0.1,1,0.2,1.2c0.1,0.2,0.3,0.4,0.6,0.5s0.9,0.1,1.6,0.1
c1.2,0,2.1-0.2,2.6-0.5s1.1-0.8,1.5-1.6c0.2-0.5,0.4-0.8,0.6-0.9s0.4-0.2,0.7-0.2c0.3,0,0.6,0.1,0.8,0.4s0.3,0.6,0.3,1.1
c0,0.5-0.1,1.1-0.4,1.8S77.9,46.1,77.6,46.6z"/>
</g>
</svg>
</div>
</div>
</div>
<script>
const video = document.getElementById("BAVideo");
function playVideo() {
video.play();
}
function stopVideo() {
video.pause();
}
</script>
Code vidéo 2
Code vidéo 2
<video id="SKVideo" src="https://va.media.tumblr.com/tumblr_s7eu3q192v1qgac6v_720.mp4" width="600" height="1067" loop ></video>
<script>
const video = document.getElementById("SKVideo");
video.addEventListener("click", function() {
// Jouer la vidéo
if (video.paused) {
video.play();
} else {
video.pause();
}
});
</script>
Code vidéo 3
Code vidéo 3
<video id="TAVideo" src="https://player.vimeo.com/external/640741056.sd.mp4?s=1cfdd5de46138a0e8c251d9a1da9059a8096a95e&profile_id=165&oauth_token_id=57447761" width="600" height="1067" ></video>
<script>
const video = document.getElementById("TAVideo");
video.addEventListener("click", function() {
// Jouer la vidéo
if (video.paused) {
video.play();
} else {
video.pause();
}
});
</script>
slider
slider
<div class="slider">
<section class="hor-0">
<div class="container">
<div class="title">
<h1>time travel<br>
<span id="timecode">00:00</span>
</h1>
</div>
<img src="https://64.media.tumblr.com/67f4569f21f02df858439d8ddeb5a8c9/5983c0ead2401665-cd/s1280x1920/1dac6e53ee5ee2d450c976fdb444bde5a9eaf13f.webp">
<video id="BAVideo" poster="https://just2dance.com/wp-content/uploads/2024/03/1280x720-25-voiture.png" autoplay muted playsinline>
<source src="https://just2dance.com/wp-content/uploads/2024/02/1280x720-25-voiture-hevc.mov" type='video/mp4; codecs="hvc1"'>
<source src="https://just2dance.com/wp-content/uploads/2024/02/1280x720-25-voiture-vp9.webm" type="video/webm">
</video>
</div>
</section>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<style>
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap");
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 16px;
color: rgb(7, 1, 22);
background-color: transparent;
}
/* hero image video */
.slider .hor-0:nth-child(1) {
display: block;
width: 100%;
height: 100%;
min-height: fit-content;
background-size: cover;
background-position: center;
background-image: linear-gradient(
180deg,
rgba(72, 50, 133, 1),
rgba(240, 20, 160, 1),
rgba(72, 50, 133, 1)
),
url("https://64.media.tumblr.com/31ca924f12e205e2103ba9477609c000/2fb3afda39b2aeb4-07/s1280x1920/9e5c6f15551ad532ac9bd6eb133223750735bfcf.jpg");
background-blend-mode: color;
}
video {
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
padding: 15% 25% 20% 25%;
width: 100%;
height: auto;
}
.container {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: auto;
z-index: 1;
}
.container img {
pointer-events: none;
position: relative;
top: 10px;
margin: 0 20% 0 20%;
padding-top: 3vh;
left: 0px;
width: 60%;
height: auto;
z-index: 3;
}
.title {
position: absolute;
padding-top: 60vh;
width: 100%;
height: fit-content;
z-index: 2;
}
.title h1 {
font-family: "Big Shoulders Display", sans-serif;
text-align: center;
font-weight: normal;
font-size: 14vh;
line-height: 12vh;
letter-spacing: 0.4em;
text-transform: uppercase;
background: linear-gradient(
0deg,
rgba(153, 255, 255, 0.8) 30%,
rgba(255, 109, 16, 1),
rgba(255, 14, 70, 1)
);
background-clip: text;
-webkit-text-fill-color: transparent;
}
.title span {
font-family: "Nova Mono", monospace;
font-weight: 400;
letter-spacing: 0.3em;
font-size: 6vh;
}
/* slider debut */
.slider {
overflow: hidden;
margin: 0%;
width: 100%;
height: 100vh;
position: relative;
border-radius: 30px;
}
.slider .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
animation: slide 20s infinite;
}
.slider .slide:nth-child(2) {
background-image: linear-gradient(
180deg,
rgba(72, 50, 133, 1),
rgba(240, 20, 160, 1),
rgba(72, 50, 133, 1)
),
url("https://64.media.tumblr.com/31ca924f12e205e2103ba9477609c000/2fb3afda39b2aeb4-07/s1280x1920/9e5c6f15551ad532ac9bd6eb133223750735bfcf.jpg");
background-blend-mode: color;
animation-delay: -0;
}
.slider .slide:nth-child(3) {
background-image: linear-gradient(
180deg,
rgba(72, 50, 133, 1),
rgba(240, 20, 160, 1),
rgba(72, 50, 133, 1)
),
url("https://64.media.tumblr.com/4b1fab7c5cde4e675028ad2b874a02de/9efa24329441e524-30/s1280x1920/fee9dc2183a13a05bf72bf74a21f37884a600d67.jpg");
background-blend-mode: color;
animation-delay: -4s;
}
.slider .slide:nth-child(4) {
background-image: linear-gradient(
180deg,
rgba(72, 50, 133, 1),
rgba(240, 20, 160, 1),
rgba(72, 50, 133, 1)
),
url("https://64.media.tumblr.com/0bc43db0476fd9197655ced09b0f9b2c/1b3e8eaecddbba58-a8/s1280x1920/9bf0064d06bf05cf988e4a42a0dfe7c8194e0345.jpg");
background-blend-mode: color;
animation-delay: -8s;
}
.slider .slide:nth-child(5) {
background-image: linear-gradient(
180deg,
rgba(72, 50, 133, 1),
rgba(240, 20, 160, 1),
rgba(72, 50, 133, 1)
),
url("https://64.media.tumblr.com/d0fa7d9dcd90f68b12796d006e3527ec/1b3e8eaecddbba58-f2/s1280x1920/dcfff1bf489a9709cf58a37f8b1fdf2a531c61ac.jpg");
background-blend-mode: color;
animation-delay: -12s;
}
.slider .slide:nth-child(6) {
background-image: linear-gradient(
180deg,
rgba(72, 50, 133, 1),
rgba(240, 20, 160, 1),
rgba(72, 50, 133, 1)
),
url("https://64.media.tumblr.com/adc3bfa5d20d74e5f68acfb19baa3bb2/cdc6ec5fe0a3049a-59/s1280x1920/af6b2d94a884950d126ffe320934f791338955db.jpg");
background-blend-mode: color;
animation-delay: -16s;
}
@keyframes slide {
0%,
15%,
100% {
opacity: 1;
transform: translateX(0);
transition: opacity 0.5s 1s, transform 0.5s 1s;
animation-timing-function: ease;
}
20% {
opacity: 0;
transform: translateX(-100%);
transition: opacity 0.5s 1s, transform 0.5s 1s;
animation-timing-function: step-end;
}
95% {
opacity: 0;
transform: translateX(-50%);
transition: opacity 0.5s 1s, transform 0.5s 1s;
animation-timing-function: ease;
}
}
</style>
<script>
const video = document.getElementById("BAVideo");
video.addEventListener("click", function () {
// Jouer la vidéo
if (video.paused) {
video.play();
} else {
video.pause();
}
});
function updateTimecode() {
const minutes = Math.floor(video.currentTime / 60);
const seconds = Math.floor(video.currentTime % 60);
const formattedTimecode = `${minutes
.toString()
.padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
const timecodeElement = document.getElementById("timecode");
timecodeElement.textContent = formattedTimecode;
}
video.addEventListener("timeupdate", updateTimecode);
// Mettre à jour le timecode chaque seconde
</script>
Page updated
Google Sites
Report abuse