Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-19 05:09:41 +02:00
Code Issues Releases Activity

Add Chrome support for mp4 Image block (#63)

Browse source
This commit is contained in:
Taly 2019-03-12 15:48:56 +03:00 • committed by GitHub
parent 404fb4642e
commit f87fd72fcb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/dist/main.css vendored
View file

File diff suppressed because one or more lines are too long

8
src/frontend/styles/components/page.pcss
View file

@ -125,7 +125,7 @@
text-align: center; text-align: center;
&__content { &__content {
img { img, video {
vertical-align: bottom; vertical-align: bottom;
max-width: 100%; max-width: 100%;
} }
@ -135,13 +135,13 @@
width: calc(100% + 120px) !important; width: calc(100% + 120px) !important;
margin-left: -60px; margin-left: -60px;
img { img, video {
width: 100%; width: 100%;
} }
} }
&--bordered { &--bordered {
img { img, video {
border: 3px solid var(--color-line-gray); border: 3px solid var(--color-line-gray);
box-sizing: border-box; box-sizing: border-box;
} }
@ -151,7 +151,7 @@
padding: 15px; padding: 15px;
background: var(--color-line-gray); background: var(--color-line-gray);
img { img, video {
max-width: 60%; max-width: 60%;
margin: 0 auto; margin: 0 auto;
} }

9
src/views/pages/blocks/image.twig
View file

@ -14,7 +14,14 @@
<figure class="block-image"> <figure class="block-image">
<div class="{{classes.join(' ')}}"> <div class="{{classes.join(' ')}}">
<img src="{{file.url}}" alt="{{caption ? caption : ''}}"> {% if file.mime and file.mime == 'video/mp4' %}
<video autoplay loop muted playsinline>
<source src="{{file.url}}" type="video/mp4">
</video>
{% else %}
<img src="{{file.url}}" alt="{{caption ? caption : ''}}">
{% endif %}
</div> </div>
{% if caption %} {% if caption %}
<footer class="block-image__caption"> <footer class="block-image__caption">