improve youtube video look
This commit is contained in:
Jos Poortvliet
Родитель
aaa35277e5
Коммит
f20fd6474e
|
|
@ -745,7 +745,7 @@ h5 {
|
|||
background: #0082c9;
|
||||
position: relative; }
|
||||
.nav.headroom {
|
||||
transition: top 200ms ease; }
|
||||
transition: transform 200ms ease; }
|
||||
.nav.headroom--pinned {
|
||||
top: 0px; }
|
||||
.nav.headroom--unpinned {
|
||||
|
|
@ -2452,23 +2452,23 @@ li {
|
|||
display: block;
|
||||
max-width: 90%;
|
||||
height: auto;
|
||||
margin: 1%;
|
||||
/* margin: 1%; */
|
||||
/* margin-top: 3%; */
|
||||
text-decoration: none;
|
||||
color: white; }
|
||||
.yt-img-overlay img {
|
||||
width: 110%;
|
||||
height: 110%;
|
||||
margin: -11% 0 -11% -5%; }
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: -5% 0 -5% 0; }
|
||||
.yt-img-overlay .col-md-4 {
|
||||
/* compensate for the 1% margin yt images need */
|
||||
width: 31%; }
|
||||
/* width: 31%; */ }
|
||||
.yt-img-overlay .col-md-3 {
|
||||
/* compensate for the 1% margin yt images need */
|
||||
width: 22.8%; }
|
||||
/* width: 22.8%; */ }
|
||||
.yt-img-overlay .yt-play-btn {
|
||||
padding-left: 42%;
|
||||
padding-top: 22%;
|
||||
padding-left: 40%;
|
||||
padding-top: 20%;
|
||||
/* padding-top: 20%; */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -591,25 +591,25 @@ li {
|
|||
display: block;
|
||||
max-width: 90%;
|
||||
height: auto;
|
||||
margin: 1%;
|
||||
/* margin: 1%; */
|
||||
/* margin-top: 3%; */
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
img {
|
||||
width: 110%;
|
||||
height: 110%;
|
||||
margin: -11% 0 -11% -5%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: -5% 0 -5% 0;
|
||||
}
|
||||
.col-md-4 { /* compensate for the 1% margin yt images need */
|
||||
width: 31%;
|
||||
/* width: 31%; */
|
||||
}
|
||||
|
||||
.col-md-3 { /* compensate for the 1% margin yt images need */
|
||||
width: 22.8%;
|
||||
/* width: 22.8%; */
|
||||
}
|
||||
.yt-play-btn {
|
||||
padding-left: 42%;
|
||||
padding-top: 22%;
|
||||
padding-left: 40%;
|
||||
padding-top: 20%;
|
||||
/* padding-top: 20%; */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -1631,29 +1631,30 @@ text-align: center;
|
|||
display: block;
|
||||
max-width: 90%;
|
||||
height: auto;
|
||||
margin: 1%;
|
||||
/* margin: 1%; */
|
||||
/* margin-top: 3%; */
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.col-md-4.yt-img-overlay { /* compensate for the 1% margin yt images need */
|
||||
width: 31%;
|
||||
/* width: 31%; */
|
||||
}
|
||||
|
||||
.col-md-3.yt-img-overlay { /* compensate for the 1% margin yt images need */
|
||||
width: 22.8%;
|
||||
/* width: 22.8%; */
|
||||
}
|
||||
|
||||
.yt-img-overlay img {
|
||||
width: 110%;
|
||||
height: 110%;
|
||||
margin: -11% 0 -11% -5%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* max-height: 100%; */
|
||||
margin: -5% 0 -5% 0;
|
||||
}
|
||||
|
||||
.yt-play-btn {
|
||||
padding-left: 42%;
|
||||
padding-top: 22%;
|
||||
padding-left: 40%;
|
||||
padding-top: 20%;
|
||||
/* padding-top: 20%; */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
</div>
|
||||
<div class="col-md-4 yt-img-overlay">
|
||||
<a class="youtube" id="Yjqd7MX434I?start=2678" href="https://www.youtube.com/watch?v=Yjqd7MX434I?t=44m38s" target="_blank" title="The Linux Action Show">
|
||||
<img src="https://img.youtube.com/vi/Yjqd7MX434I/hqdefault.jpg" title="The Linux Action Show" />
|
||||
<img src="https://img.youtube.com/vi/Yjqd7MX434I/maxresdefault.jpg" title="The Linux Action Show" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
</div>
|
||||
<div class="col-md-4 yt-img-overlay">
|
||||
<a class="youtube" id="rAXf8SGAXFE?start=2173" href="https://www.youtube.com/watch?v=rAXf8SGAXFE?t=36m21s" target="_blank" title="Bad Voltage">
|
||||
<img src="https://img.youtube.com/vi/rAXf8SGAXFE/hqdefault.jpg" title="Bad Voltage" />
|
||||
<img src="https://img.youtube.com/vi/rAXf8SGAXFE/maxresdefault.jpg" title="Bad Voltage" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
</div>
|
||||
<div class="col-md-4 yt-img-overlay">
|
||||
<a class="youtube" id="iMfokaX2r8g" href="https://www.youtube.com/watch?v=iMfokaX2r8g" target="_blank" title="Interview by Bryan Lunduke">
|
||||
<img src="https://img.youtube.com/vi/iMfokaX2r8g/hqdefault.jpg" title="Interview by Bryan Lunduke" />
|
||||
<img src="https://img.youtube.com/vi/iMfokaX2r8g/maxresdefault.jpg" title="Interview by Bryan Lunduke" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="col-md-6">
|
||||
<div class="yt-img-overlay">
|
||||
<a class="youtube" id="sZpYXUD1ZVM" href="https://www.youtube.com/watch?v=sZpYXUD1ZVM" title="Collabora Online in Nextcloud">
|
||||
<img class="img-responsive featureimg" src="https://img.youtube.com/vi/sZpYXUD1ZVM/hqdefault.jpg" title="Collabora Online in Nextcloud" />
|
||||
<img class="img-responsive featureimg" src="https://img.youtube.com/vi/sZpYXUD1ZVM/maxresdefault.jpg" title="Collabora Online in Nextcloud" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<div class="col-md-6">
|
||||
<div class="yt-img-overlay">
|
||||
<a class="youtube" id="8iuSFKVl-xQ" href="https://www.youtube.com/watch?v=8iuSFKVl-xQ" title="Editing public link sharesd">
|
||||
<img class="img-responsive featureimg" src="https://img.youtube.com/vi/8iuSFKVl-xQ/hqdefault.jpg" title="Editing public link shares" />
|
||||
<img class="img-responsive featureimg" src="https://img.youtube.com/vi/8iuSFKVl-xQ/maxresdefault.jpg" title="Editing public link shares" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
<div class="col-md-10 col-md-offset-2">
|
||||
<div class="yt-img-overlay">
|
||||
<a class="youtube" id="MDc1bNxn3js" href="https://www.youtube.com/watch?v=MDc1bNxn3js" title="Collabora Online in Nextcloud">
|
||||
<img class="img-responsive featureimg" src="https://img.youtube.com/vi/MDc1bNxn3js/hqdefault.jpg" title="Collabora Online in Nextcloud tutorial" />
|
||||
<img class="img-responsive featureimg" src="https://img.youtube.com/vi/MDc1bNxn3js/maxresdefault.jpg" title="Collabora Online in Nextcloud tutorial" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<div class="row ">
|
||||
<div class="col-md-4 yt-img-overlay">
|
||||
<a class="youtube" href="https://www.youtube.com/watch?v=9CGQ3dJkDdI" title="Nextcloud 11 in action">
|
||||
<img src="https://img.youtube.com/vi/9CGQ3dJkDdI/hqdefault.jpg" title="Nextcloud 11 in action" />
|
||||
<img src="https://img.youtube.com/vi/9CGQ3dJkDdI/maxresdefault.jpg" title="Nextcloud 11 in action" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<div class="col-md-6">
|
||||
<div class="yt-img-overlay">
|
||||
<a class="youtube" href="https://www.youtube.com/watch?v=Fe1I7wYW6hA" title="Creating anonymous upload links">
|
||||
<img src="https://img.youtube.com/vi/Fe1I7wYW6hA/hqdefault.jpg" title="Creating anonymous upload links" />
|
||||
<img src="https://img.youtube.com/vi/Fe1I7wYW6hA/maxresdefault.jpg" title="Creating anonymous upload links" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
<div class="col-md-6">
|
||||
<!--<div class="yt-img-overlay">
|
||||
<a class="youtube" href="https://www.youtube.com/watch?v=Fe1I7wYW6hA" title="Creating anonymous upload links">
|
||||
<img src="https://img.youtube.com/vi/Fe1I7wYW6hA/hqdefault.jpg" title="Creating anonymous upload links" />
|
||||
<img src="https://img.youtube.com/vi/Fe1I7wYW6hA/maxresdefault.jpg" title="Creating anonymous upload links" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
@ -206,7 +206,7 @@
|
|||
<div class="col-md-5">
|
||||
<div class="yt-img-overlay">
|
||||
<a class="youtube" href="https://www.youtube.com/watch?v=egLqRqb4sHA" title="Spreedbox explained">
|
||||
<img class="img-responsive featureimg" src="https://img.youtube.com/vi/egLqRqb4sHA/hqdefault.jpg" title="Spreedbox explained" />
|
||||
<img class="img-responsive featureimg" src="https://img.youtube.com/vi/egLqRqb4sHA/maxresdefault.jpg" title="Spreedbox explained" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
@ -356,7 +356,7 @@
|
|||
<!-- Theming in 30 seconds -->
|
||||
<div class="col-md-4 yt-img-overlay">
|
||||
<a class="youtube" href="https://www.youtube.com/watch?v=wqRgeFXYUys" title="Theming Nextcloud in 30 seconds">
|
||||
<img src="https://img.youtube.com/vi/wqRgeFXYUys/hqdefault.jpg" title="Theming Nextcloud in 30 seconds" />
|
||||
<img src="https://img.youtube.com/vi/wqRgeFXYUys/maxresdefault.jpg" title="Theming Nextcloud in 30 seconds" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
@ -365,7 +365,7 @@
|
|||
</div>
|
||||
<div class="col-md-4 yt-img-overlay">
|
||||
<a class="youtube" href="https://www.youtube.com/watch?v=Fe1I7wYW6hA" title="Creating anonymous upload links">
|
||||
<img src="https://img.youtube.com/vi/Fe1I7wYW6hA/hqdefault.jpg" title="Creating anonymous upload links" />
|
||||
<img src="https://img.youtube.com/vi/Fe1I7wYW6hA/maxresdefault.jpg" title="Creating anonymous upload links" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
@ -374,7 +374,7 @@
|
|||
</div>
|
||||
<div class="col-md-4 yt-img-overlay">
|
||||
<a class="youtube" href="https://www.youtube.com/watch?v=yqr22XG8P4w" title="Shorten share URL: removing index.php">
|
||||
<img src="https://img.youtube.com/vi/yqr22XG8P4w/hqdefault.jpg" title="Shorten share URL: removing index.php" />
|
||||
<img src="https://img.youtube.com/vi/yqr22XG8P4w/maxresdefault.jpg" title="Shorten share URL: removing index.php" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
@ -385,7 +385,7 @@
|
|||
<div class="row">
|
||||
<div class="col-md-4 yt-img-overlay">
|
||||
<a class="youtube" href="https://www.youtube.com/watch?v=sZpYXUD1ZVM" title="Collabora Online Office in Nextcloud">
|
||||
<img src="https://img.youtube.com/vi/sZpYXUD1ZVM/hqdefault.jpg" title="Collabora Online Office in Nextcloud" />
|
||||
<img src="https://img.youtube.com/vi/sZpYXUD1ZVM/maxresdefault.jpg" title="Collabora Online Office in Nextcloud" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
<div class="col-md-10 yt-img-overlay">
|
||||
<a class="youtube" href="https://www.youtube.com/watch?v=luWFBBcvkyc" title="Nextcloud Secure Sharing Outlook Add-in">
|
||||
<img src="https://img.youtube.com/vi/luWFBBcvkyc/hqdefault.jpg" title="Nextcloud Secure Sharing Outlook Add-in" />
|
||||
<img src="https://img.youtube.com/vi/luWFBBcvkyc/maxresdefault.jpg" title="Nextcloud Secure Sharing Outlook Add-in" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ $(document).ready(function() {
|
|||
<div class="col-md-6">
|
||||
<div class="yt-img-overlay">
|
||||
<a class="youtube" href="https://www.youtube.com/watch?v=Fe1I7wYW6hA" title="Creating anonymous upload links">
|
||||
<img src="https://img.youtube.com/vi/Fe1I7wYW6hA/hqdefault.jpg" title="Creating anonymous upload links" />
|
||||
<img src="https://img.youtube.com/vi/Fe1I7wYW6hA/maxresdefault.jpg" title="Creating anonymous upload links" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<div class="col-md-5">
|
||||
<div class="yt-img-overlay">
|
||||
<a class="youtube" id="egLqRqb4sHA"href="https://www.youtube.com/watch?v=egLqRqb4sHA" title="">
|
||||
<img class="img-responsive" src="https://img.youtube.com/vi/egLqRqb4sHA/hqdefault.jpg" title="" />
|
||||
<img class="img-responsive" src="https://img.youtube.com/vi/egLqRqb4sHA/maxresdefault.jpg" title="" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<div class="col-md-5">
|
||||
<div class="yt-img-overlay">
|
||||
<a class="youtube" id="Yc6avTVowc0" href="https://www.youtube.com/watch?v=Yc6avTVowc0" title="">
|
||||
<img class="img-responsive" src="https://img.youtube.com/vi/Yc6avTVowc0/hqdefault.jpg" title="" />
|
||||
<img class="img-responsive" src="https://img.youtube.com/vi/Yc6avTVowc0/maxresdefault.jpg" title="" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
<div class="col-md-12">
|
||||
<div class="yt-img-overlay">
|
||||
<a class="youtube" id="8M2GbUJv5N0" href="https://www.youtube.com/watch?v=8M2GbUJv5N0" title="Design">
|
||||
<img class="img-responsive" src="https://img.youtube.com/vi/8M2GbUJv5N0/hqdefault.jpg" title="Design" />
|
||||
<img class="img-responsive" src="https://img.youtube.com/vi/8M2GbUJv5N0/maxresdefault.jpg" title="Design" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="col-md-5">
|
||||
<div class="yt-img-overlay">
|
||||
<a class="youtube" href="https://www.youtube.com/watch?v=egLqRqb4sHA" title="Introduction to Nextcloud 9">
|
||||
<img class="img-responsive" src="https://img.youtube.com/vi/egLqRqb4sHA/hqdefault.jpg" title="Introduction to Nextcloud 9" />
|
||||
<img class="img-responsive" src="https://img.youtube.com/vi/egLqRqb4sHA/maxresdefault.jpg" title="Introduction to Nextcloud 9" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
<div class="col-md-10">
|
||||
<div class="yt-img-overlay">
|
||||
<a class="youtube" href="https://www.youtube.com/watch?v=1zXnypuu27I" title="Spreed.ME in Nextcloud">
|
||||
<img class="img-responsive featureimg" src="https://img.youtube.com/vi/1zXnypuu27I/hqdefault.jpg" title="Spreed.ME in Nextcloud tutorial" />
|
||||
<img class="img-responsive featureimg" src="https://img.youtube.com/vi/1zXnypuu27I/maxresdefault.jpg" title="Spreed.ME in Nextcloud tutorial" />
|
||||
<div class="yt-play-btn">
|
||||
<i></i>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ require get_template_directory().'/strings.php';
|
|||
<li class="nav__item"><a href="<?php echo home_url('workflow') ?>"><?php echo $l->t('Workflow');?></a></li>
|
||||
<li class="nav__item"><a href="<?php echo home_url('collabora') ?>"><?php echo $l->t('Online office');?></a></li>
|
||||
<li class="nav__item"><a href="<?php echo home_url('webrtc') ?>"><?php echo $l->t('Video chat');?></a></li>
|
||||
<li class="nav__item"><a href="<?php echo home_url('outlook') ?>"><?php echo $l->t('Outlook integration');?></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче