Added video embeds shortcode (experimental)
parent
1fe0dd4282
commit
04a1970fff
|
@ -8,6 +8,49 @@
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* VIDEO TABS */
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
list-style: none;
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
font-family: sans-serif
|
||||||
|
}
|
||||||
|
.tabs li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.tabs input[type="radio"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.tabs label {
|
||||||
|
display: block;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border: 2px solid black;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-radius: 3px 3px 0 0;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
.tabs .tab-panel {
|
||||||
|
display: none;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
border-top: 2px solid gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs [id^="tab"]:checked + label {
|
||||||
|
background-color: gray;
|
||||||
|
border: 2px solid gray;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.tabs [id^="tab"]:checked ~ [id^="tab-panel"] {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
/* FONTS */
|
/* FONTS */
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
|
|
|
@ -0,0 +1,35 @@
|
||||||
|
<div class="embed video-player">
|
||||||
|
<ul class="tabs">
|
||||||
|
<li>
|
||||||
|
<input id="tab1" type="radio" name="tabs" checked />
|
||||||
|
<label for="tab1">Piped (il.ax)</label>
|
||||||
|
<div id="tab-panel1" class="tab-panel">
|
||||||
|
<iframe class="youtube-player" type="text/html" width="700" height="385" src="https://il.ax/embed/{{ index .Params 0 }}" allowfullscreen frameborder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<input id="tab2" type="radio" name="tabs" />
|
||||||
|
<label for="tab2">YouTube</label>
|
||||||
|
<div id="tab-panel2" class="tab-panel">
|
||||||
|
<iframe class="youtube-player" type="text/html" width="700" height="385" src="https://ytr.gianmarco.gg/?code={{ index .Params 0 }}" allowfullscreen frameborder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<input id="tab3" type="radio" name="tabs" />
|
||||||
|
<label for="tab3">Odysee</label>
|
||||||
|
<div id="tab-panel3" class="tab-panel">
|
||||||
|
<iframe class="youtube-player" type="text/html" width="700" height="385" src="https://ytr.gianmarco.gg/odysee/?code={{ index .Params 1 }}" allowfullscreen frameborder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<input id="tab4" type="radio" name="tabs" />
|
||||||
|
<label for="tab4">PeerTube</label>
|
||||||
|
<div id="tab-panel4" class="tab-panel">
|
||||||
|
<iframe class="youtube-player" type="text/html" width="700" height="385" src="https://peertube.uno/videos/embed/{{ index .Params 2 }}" allowfullscreen frameborder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- og width was 640 -->
|
||||||
|
<!-- shortcode: {{< video NX6z--cOpYI "🇮🇹-perché-il-web-moderno-fa:b" 1d5487b5-8727-491f-b9cb-3c22a8dce7d2 >}} -->
|
Loading…
Reference in New Issue