Embedded Files
vidéo mask ciculaire svg
vidéo mask ciculaire svg
Code à copier et à intégrer avec votre propre page ⬇️
<figure>
<video id="SKVideo" poster="https://64.media.tumblr.com/e63b40180a8c0d3aa5781747f6c4a229/5860b5fcbc45d50e-d9/s1280x1920/c7fc3fd1614815ccfd679a67170d76d1b29e04df.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;
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 avec votre propre page ⬇️
<figure>
<video id="POVideo" preload="metadata" poster="https://64.media.tumblr.com/e63b40180a8c0d3aa5781747f6c4a229/5860b5fcbc45d50e-d9/s1280x1920/c7fc3fd1614815ccfd679a67170d76d1b29e04df.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("POVideo");
video.addEventListener("click", function() {
// Jouer la vidéo
if (video.paused) {
video.play();
} else {
video.pause();
}
});
</sript>
vidéo vertical arrondi 3 boutons
vidéo vertical arrondi 3 boutons
Code à copier et à intégrer dans votre page ⬇️
<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://64.media.tumblr.com/ac030e8763d811b81d7616283215b0b9/f0e40b780e90ab6b-01/s1280x1920/fa8279f339a4a3ce852b6359330617cac0477edd.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 vertical button svg
vidéo alpha vertical button svg
Code à copier et à intégrer avec votre propre page ⬇️
<figure>
<video controls controls autoplay preload="metadata" buffered loop poster="https://64.media.tumblr.com/e63b40180a8c0d3aa5781747f6c4a229/5860b5fcbc45d50e-d9/s1280x1920/c7fc3fd1614815ccfd679a67170d76d1b29e04df.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{
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;
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>
vidéo alpha horizontal z-index
vidéo alpha horizontal z-index
Code à copier et à intégrer avec votre propre page ⬇️
<div class="container">
<img src="https://64.media.tumblr.com/32fa8ef671f2f0ac77405cd10cbaf37a/4749a06f1bd1914a-27/s2048x3072/f36fe2f027794373cf5a2e389670c6e371685099.webp" >
<video id="BAVideo" poster="https://64.media.tumblr.com/d68f6b376f96d6bb0b16a1148a5d7e72/d1d56ad282c7835f-b2/s1280x1920/34a20993468c539175e3fde7340341d6fbcbda62.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éos end to end mix blend mode
Vidéos end to end mix blend mode
Code à copier et à intégrer avec votre propre page ⬇️
<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>
Page updated
Google Sites
Report abuse