Style media embeds

This commit is contained in:
Ben Goldsworthy 2022-11-28 22:24:04 +00:00
parent ea35ca38c1
commit 428645245b
3 changed files with 8 additions and 6 deletions

View file

@ -195,7 +195,8 @@ body {
width: auto !important; width: auto !important;
} }
.popup__image { .popup__image,
.popup__video {
width: auto; width: auto;
height: auto; height: auto;
max-width: 70vw; max-width: 70vw;
@ -274,7 +275,8 @@ body {
min-width: 350px; min-width: 350px;
} }
.popup__image { .popup__image,
.popup__video {
max-width: 100%; max-width: 100%;
max-height: 60vh; max-height: 60vh;
margin-top: 1em; margin-top: 1em;

View file

@ -8,12 +8,12 @@
@if($checkin->note) @if($checkin->note)
@if(preg_match("/\[\[([^\]]+)\]\]/", $checkin->note, $filepath)) @if(preg_match("/\[\[([^\]]+)\]\]/", $checkin->note, $filepath))
@if(preg_match("/\.webm/", $filepath[1])) @if(preg_match("/\.webm/", $filepath[1]))
<video controls> <video class="popup__video" controls>
<source src="/videos/{{ $filepath[1] }}" type="video/webm"> <source src="/videos/{{ $filepath[1] }}" type="video/webm">
<p>Your browser doesn't support HTML video. Here is a <a href="/{{ $filepath[1] }}">link to the video</a> instead.</p> <p>Your browser doesn't support HTML video. Here is a <a href="/{{ $filepath[1] }}">link to the video</a> instead.</p>
</video> </video>
@elseif(preg_match("/\.ogg/", $filepath[1])) @elseif(preg_match("/\.ogg/", $filepath[1]))
<audio controls> <audio class="popup__audio" controls>
<source src="/audio/{{ $filepath[1] }}" type="audio/ogg"> <source src="/audio/{{ $filepath[1] }}" type="audio/ogg">
<p>Download <a href="/{{ $filepath[1] }}">OGG</a> audio.</p> <p>Download <a href="/{{ $filepath[1] }}">OGG</a> audio.</p>
</audio> </audio>

View file

@ -94,7 +94,7 @@
@if(preg_match("/\[\[([^\]]+)\]\]/", $checkin->note, $filepath)) @if(preg_match("/\[\[([^\]]+)\]\]/", $checkin->note, $filepath))
@if(preg_match("/\.webm/", $filepath[1])) @if(preg_match("/\.webm/", $filepath[1]))
@php @php
$popupContent = '<video controls><source src="/videos/'; $popupContent = '<video class="popup__video" controls><source src="/videos/';
$popupContent .= $filepath[1]; $popupContent .= $filepath[1];
$popupContent .= '" type="video/webm">'; $popupContent .= '" type="video/webm">';
$popupContent .= '<p>Your browser doesn\'t support HTML video. Here is a <a href="/'; $popupContent .= '<p>Your browser doesn\'t support HTML video. Here is a <a href="/';
@ -103,7 +103,7 @@
@endphp @endphp
@elseif(preg_match("/\.ogg/", $filepath[1])) @elseif(preg_match("/\.ogg/", $filepath[1]))
@php @php
$popupContent = '<audio controls><source src="/audio/'; $popupContent = '<audio class="popup__audio" controls><source src="/audio/';
$popupContent .= $filepath[1]; $popupContent .= $filepath[1];
$popupContent .= '" type="audio/ogg">'; $popupContent .= '" type="audio/ogg">';
$popupContent .= '<p>Download <a href="/'; $popupContent .= '<p>Download <a href="/';