Link preview changes and video player
This commit is contained in:
parent
ad5dd633e9
commit
332becdf6f
7 changed files with 67 additions and 54 deletions
|
@ -1,37 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<style>
|
|
||||||
body{
|
|
||||||
margin:0;
|
|
||||||
background-color: black;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
video{
|
|
||||||
width:100vw;
|
|
||||||
max-height: 100vh;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<video controls id="main">
|
|
||||||
<source src="">
|
|
||||||
</video>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
//https://davidwalsh.name/query-string-javascript
|
|
||||||
function getUrlParameter(name) {
|
|
||||||
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
|
||||||
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
|
||||||
var results = regex.exec(location.search);
|
|
||||||
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
|
||||||
};
|
|
||||||
|
|
||||||
var source = document.createElement('source')
|
|
||||||
source.src = '/media/'+getUrlParameter('v');
|
|
||||||
document.getElementById('main').appendChild(source);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -9,13 +9,13 @@
|
||||||
<meta property="og:url" content="{{.Permalink}}">
|
<meta property="og:url" content="{{.Permalink}}">
|
||||||
{{if .Params.video}}
|
{{if .Params.video}}
|
||||||
<meta name="twitter:card" content="player"/>
|
<meta name="twitter:card" content="player"/>
|
||||||
<meta property="og:video" content="https://libresolutions.network/video-embed?v={{.Params.video}}">
|
<meta property="og:video" content="https://libresolutions.network/embed?v={{.Params.video}}">
|
||||||
<meta property="og:video:url" content="https://libresolutions.network/video-embed?v={{.Params.video}}">
|
<meta property="og:video:url" content="https://libresolutions.network/embed?v={{.Params.video}}">
|
||||||
<meta property="og:video:secure_url" content="https://libresolutions.network/video-embed?v={{.Params.video}}">
|
<meta property="og:video:secure_url" content="https://libresolutions.network/embed?v={{.Params.video}}">
|
||||||
<meta property="og:type" content="video">
|
<meta property="og:type" content="video">
|
||||||
<meta name="twitter:player:width" content="480" />
|
<meta name="twitter:player:width" content="480" />
|
||||||
<meta name="twitter:player:height" content="360" />
|
<meta name="twitter:player:height" content="360" />
|
||||||
<meta property="twitter:player" content="https://libresolutions.network/video-embed?v={{.Params.video}}">
|
<meta property="twitter:player" content="https://libresolutions.network/embed?v={{.Params.video}}">
|
||||||
{{else}}
|
{{else}}
|
||||||
{{if .Params.peertubeURL}}
|
{{if .Params.peertubeURL}}
|
||||||
<meta property="og:video" content="{{.Params.peertubeURL}}">
|
<meta property="og:video" content="{{.Params.peertubeURL}}">
|
||||||
|
|
|
@ -15,12 +15,19 @@
|
||||||
</section>
|
</section>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{end}}
|
{{end}}
|
||||||
|
<hr>
|
||||||
<h2>Recent Content</h2>
|
<h2>Recent Content</h2>
|
||||||
{{range first 5 .Site.RegularPages}}
|
{{range first 5 .Site.RegularPages}}
|
||||||
|
|
||||||
<section class="recent">
|
<section class="recent">
|
||||||
<a href="{{.Permalink}}">
|
<a href="{{.Permalink}}">
|
||||||
|
{{if .Params.video}}
|
||||||
|
<video controls>
|
||||||
|
<source src="{{.Params.video}}">
|
||||||
|
</video>
|
||||||
|
{{else}}
|
||||||
<img src="{{.Params.image}}">
|
<img src="{{.Params.image}}">
|
||||||
|
{{end}}
|
||||||
</a>
|
</a>
|
||||||
<div>
|
<div>
|
||||||
<a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
|
<a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
|
||||||
|
|
|
@ -2,8 +2,12 @@
|
||||||
<channel>
|
<channel>
|
||||||
<title>{{ .Title }}</title>
|
<title>{{ .Title }}</title>
|
||||||
<link>{{ .Permalink }}</link>
|
<link>{{ .Permalink }}</link>
|
||||||
<description>{{.Params.description}}</description>
|
<description>{{.Site.Data.details.description}}</description>
|
||||||
<image href="{{.Site.Params.image}}"/>
|
<image>
|
||||||
|
<title>Libre Solutions Network</title>
|
||||||
|
<link>https://libresolutions.network</link>
|
||||||
|
<url>{{.Site.BaseURL}}{{.Site.Data.details.logo}}</url>
|
||||||
|
</image>
|
||||||
<generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
|
<generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
|
||||||
<language>{{.}}</language>{{end}}
|
<language>{{.}}</language>{{end}}
|
||||||
{{ with .OutputFormats.Get "RSS" }}
|
{{ with .OutputFormats.Get "RSS" }}
|
||||||
|
@ -18,10 +22,10 @@
|
||||||
<guid>{{ .Permalink }}</guid>
|
<guid>{{ .Permalink }}</guid>
|
||||||
<image>{{.Params.image}}</image>
|
<image>{{.Params.image}}</image>
|
||||||
{{ if .Params.audio }}
|
{{ if .Params.audio }}
|
||||||
<enclosure url="{{.Params.audio}}" />
|
<enclosure url="{{.Site.BaseURL}}{{.Params.audio}}" />
|
||||||
{{end}}
|
{{end}}
|
||||||
{{ if .Params.video}}
|
{{ if .Params.video}}
|
||||||
<enclosure url="{{.Params.video}}" />
|
<enclosure url="{{.Site.BaseURL}}{{.Params.video}}" />
|
||||||
{{end}}
|
{{end}}
|
||||||
<description>{{- .Content | html -}}</description>
|
<description>{{- .Content | html -}}</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
<a href="{{ .Get 0 }}" class="link-preview">
|
<a href="{{ .Get 0 }}" class="link-preview">
|
||||||
|
{{if .Get 3}}
|
||||||
<img src='{{.Get 3}}'>
|
<img src='{{.Get 3}}'>
|
||||||
|
{{end}}
|
||||||
<div>
|
<div>
|
||||||
<h3>{{ .Get 1 }}</h3>
|
<h3>{{ .Get 1 }}</h3>
|
||||||
<p>{{.Get 2 }}</p>
|
<p>{{.Get 2 }}</p>
|
||||||
|
|
27
layouts/shortcodes/video-player.html
Normal file
27
layouts/shortcodes/video-player.html
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
<style>
|
||||||
|
article video{
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
left: 0;
|
||||||
|
width:100vw;
|
||||||
|
max-height: 100vh;
|
||||||
|
max-width: initial;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<video controls id="main">
|
||||||
|
<source src="">
|
||||||
|
</video>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
//https://davidwalsh.name/query-string-javascript
|
||||||
|
function getUrlParameter(name) {
|
||||||
|
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
||||||
|
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
||||||
|
var results = regex.exec(location.search);
|
||||||
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||||
|
};
|
||||||
|
|
||||||
|
var source = document.createElement('source')
|
||||||
|
source.src = '/media/'+getUrlParameter('v');
|
||||||
|
document.getElementById('main').appendChild(source);
|
||||||
|
</script>
|
|
@ -42,6 +42,9 @@ nav{
|
||||||
border-radius:30%;
|
border-radius:30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
font-size:250%;
|
||||||
|
}
|
||||||
p {
|
p {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -159,6 +162,7 @@ section {
|
||||||
padding: 1.25rem;
|
padding: 1.25rem;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
min-width: 30vw;
|
min-width: 30vw;
|
||||||
|
font-size:125%;
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
article {
|
||||||
|
@ -212,15 +216,22 @@ article img,
|
||||||
article video,
|
article video,
|
||||||
article iframe {
|
article iframe {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
max-width: 40rem;
|
max-width: 60rem;
|
||||||
|
width: 80%;
|
||||||
|
min-height: fit-content;
|
||||||
|
}
|
||||||
|
article iframe{
|
||||||
|
height:30rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
section iframe,
|
article>section>a{
|
||||||
article iframe {
|
display:flex;
|
||||||
width: 80%;
|
flex-direction: column;
|
||||||
height: 25rem;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
table{
|
table{
|
||||||
width:fit-content;
|
width:fit-content;
|
||||||
}
|
}
|
||||||
|
@ -246,9 +257,6 @@ video{
|
||||||
text-align: left;
|
text-align: left;
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
}
|
}
|
||||||
.link-preview>*{
|
|
||||||
margin:0.5rem;
|
|
||||||
}
|
|
||||||
.link-preview>img{
|
.link-preview>img{
|
||||||
max-width: 20%;
|
max-width: 20%;
|
||||||
}
|
}
|
||||||
|
@ -285,7 +293,9 @@ aside .listing img{
|
||||||
padding:0;
|
padding:0;
|
||||||
}
|
}
|
||||||
.recent img,
|
.recent img,
|
||||||
.featured img{
|
.featured img,
|
||||||
|
.recent video,
|
||||||
|
.featured video{
|
||||||
max-width:20rem;
|
max-width:20rem;
|
||||||
max-height:10rem;
|
max-height:10rem;
|
||||||
margin:1rem;
|
margin:1rem;
|
||||||
|
|
Loading…
Reference in a new issue