mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
docs(transitions): add poster for videos
This commit is contained in:
parent
ce456f8ed9
commit
99907dbf4f
@ -55,7 +55,7 @@ To start adding transition between your pages, add the following CSS to your [`a
|
|||||||
|
|
||||||
This produces the following result when navigating between pages:
|
This produces the following result when navigating between pages:
|
||||||
|
|
||||||
<video controls class="rounded">
|
<video controls class="rounded" poster="https://res.cloudinary.com/nuxt/video/upload/v1665061349/nuxt3/nuxt3-page-transitions_umwvmh.jpg">
|
||||||
<source src="https://res.cloudinary.com/nuxt/video/upload/v1665061349/nuxt3/nuxt3-page-transitions_umwvmh.mp4" type="video/mp4">
|
<source src="https://res.cloudinary.com/nuxt/video/upload/v1665061349/nuxt3/nuxt3-page-transitions_umwvmh.mp4" type="video/mp4">
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
@ -96,7 +96,7 @@ definePageMeta({
|
|||||||
|
|
||||||
Moving to the about page will add the 3d rotation effect:
|
Moving to the about page will add the 3d rotation effect:
|
||||||
|
|
||||||
<video controls class="rounded">
|
<video controls class="rounded" poster="https://res.cloudinary.com/nuxt/video/upload/v1665063233/nuxt3/nuxt3-page-transitions-cutom.jpg">
|
||||||
<source src="https://res.cloudinary.com/nuxt/video/upload/v1665063233/nuxt3/nuxt3-page-transitions-cutom.mp4" type="video/mp4">
|
<source src="https://res.cloudinary.com/nuxt/video/upload/v1665063233/nuxt3/nuxt3-page-transitions-cutom.mp4" type="video/mp4">
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
@ -187,7 +187,7 @@ definePageMeta({
|
|||||||
|
|
||||||
This produces the following result when navigating between pages:
|
This produces the following result when navigating between pages:
|
||||||
|
|
||||||
<video controls class="rounded">
|
<video controls class="rounded" poster="https://res.cloudinary.com/nuxt/video/upload/v1665065289/nuxt3/nuxt3-layouts-transitions_c9hwlx.jpg">
|
||||||
<source src="https://res.cloudinary.com/nuxt/video/upload/v1665065289/nuxt3/nuxt3-layouts-transitions_c9hwlx.mp4" type="video/mp4">
|
<source src="https://res.cloudinary.com/nuxt/video/upload/v1665065289/nuxt3/nuxt3-layouts-transitions_c9hwlx.mp4" type="video/mp4">
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
@ -360,7 +360,7 @@ const next = computed(() => '/' + (id.value + 1))
|
|||||||
|
|
||||||
The page now applies the `slide-left` transition when going to the next id and `slide-right` for the previous:
|
The page now applies the `slide-left` transition when going to the next id and `slide-right` for the previous:
|
||||||
|
|
||||||
<video controls class="rounded">
|
<video controls class="rounded" poster="https://res.cloudinary.com/nuxt/video/upload/v1665069410/nuxt3/nuxt-dynamic-page-transitions.jpg">
|
||||||
<source src="https://res.cloudinary.com/nuxt/video/upload/v1665069410/nuxt3/nuxt-dynamic-page-transitions.mp4" type="video/mp4">
|
<source src="https://res.cloudinary.com/nuxt/video/upload/v1665069410/nuxt3/nuxt-dynamic-page-transitions.mp4" type="video/mp4">
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user