ayo/blog
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make yt embed responsive

Browse source
This commit is contained in:
Ayo 2019-10-05 03:28:58 +08:00
parent bb5ff43771
commit af83287e4f
2 changed files with 24 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
_posts/2019-10-04-google-firebase-overview.md
View file

@ -39,19 +39,25 @@ I want to make it clear that I am not paid in anyway to promote Google Firebase.
In Firebase, authentication is a breeze with many (and I mean *many*) providers for logging in such as Facebook, Google, Twitter, and others. In Firebase, authentication is a breeze with many (and I mean *many*) providers for logging in such as Facebook, Google, Twitter, and others.
<div class="embed-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/8sGY55yxicA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/8sGY55yxicA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
**2. Database** **2. Database**
With **Cloud Firestore** as the database, flexibility and scaling is never a problem and you are always sure that your data is in sync across all your client apps --be it in mobile, web, or some server application. With **Cloud Firestore** as the database, flexibility and scaling is never a problem and you are always sure that your data is in sync across all your client apps --be it in mobile, web, or some server application.
<div class="embed-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/QcsAb2RR52c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/QcsAb2RR52c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
**3. Serverless Cloud Functions** **3. Serverless Cloud Functions**
**Cloud Functions** for Firebase let you run backend logic in response to events triggered by HTTPS requests or some other Firebase features, deployed in Google's cloud and fully managed environment. This frees us up from the responsibility of setting up, maintaining, and scaling our backend manually. **Cloud Functions** for Firebase let you run backend logic in response to events triggered by HTTPS requests or some other Firebase features, deployed in Google's cloud and fully managed environment. This frees us up from the responsibility of setting up, maintaining, and scaling our backend manually.
<div class="embed-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/vr0Gfvp5v1A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/vr0Gfvp5v1A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
**4. Low Cost** **4. Low Cost**

18
assets/main.scss
View file

@ -498,3 +498,21 @@ table.image caption {
font-size: small; font-size: small;
font-style: italic; font-style: italic;
} }
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}