Update CSS for youtube full screen

This commit is contained in:
giongto35 2019-09-30 02:37:37 +08:00
parent 5f3ea8bc00
commit 3788897a11
2 changed files with 21 additions and 3 deletions

16
assets/css/style.scss vendored
View file

@ -11,3 +11,19 @@
flex: 50.0%;
padding: 5px;
}
.player-wrapper {
text-align: center;
display: block;
padding-top: 56.25%;
position: relative;
}
.player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

8
index.html vendored
View file

@ -5,11 +5,13 @@ title: Cloud Retro
<div class="blurb">
<iframe width="560" height="315" src="https://www.youtube.com/embed/GUBrJGAxZZg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<div class="player-wrapper">
<iframe class="player" src="https://www.youtube.com/embed/GUBrJGAxZZg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<p>This project aims to bring the most modern and convenient gaming experience to users. You can play any retro games on your browser directly, which is fully compatible with multi-platform like Desktop, Android, ~~IOS~~. This flexibility also enables online gaming experience to retro games. </p>
<p>This project aims to bring the most modern and convenient gaming experience to users. You can play any retro games on your browser directly, which is fully compatible with multi-platform like Desktop, Android, ~~IOS~~. This flexibility also enables online gaming experience to retro games. </p>
<p>Cloud Gaming field is the future of gaming when it can go beyond the limitation of hardware by utilizing Cloud and streaming technology. This year, Google and Microsoft are joining the scene with Google Stadia and Microsoft Xcloud.</p>
<p>Cloud Gaming field is the future of gaming when it can go beyond the limitation of hardware by utilizing Cloud and streaming technology. This year, Google and Microsoft are joining the scene with Google Stadia and Microsoft Xcloud.</p>
<div class="row">
<div class="column">