Merge pull request #215 from besartberisha/bugfix/responsive-video

fix: Make sure videos render properly on smaller screens

docs/api-development/commodo/introduction.md

@@ -6,7 +6,7 @@ sidebar_label: Introduction
 
 Learn the basics of Commodo in our knowledge-sharing playlist below.
 
-<iframe width="805" height="390" src="https://www.youtube.com/embed/i9xRDdqCzjk" frameborder="0" allowfullscreen></iframe>
+<iframe width="100%" height="390" src="https://www.youtube.com/embed/i9xRDdqCzjk" frameborder="0" allowfullscreen></iframe>
 
 To simplify API development, Webiny heavily relies on a package called [Commodo](https://github.com/webiny/commodo).
 

docs/api-development/introduction.md

@@ -31,4 +31,4 @@ Webiny is organizing Knowledge-Sharing sessions to create a knowledge database f
 
 Learn how to develop APIs with Webiny in the session below.
 
-<iframe width="805" height="390" src="https://www.youtube.com/embed/8aJ_Ja1aTy0" frameborder="0" allowfullscreen></iframe>
+<iframe width="100%" height="390" src="https://www.youtube.com/embed/8aJ_Ja1aTy0" frameborder="0" allowfullscreen></iframe>

docs/app-development/introduction.md

@@ -15,7 +15,7 @@ With traditional React apps, you would import all your components and mount them
 :::info
 Check out our knowledge-sharing session on `APP Development With Webiny.` We'll get to know the structure of the app, how it is bundled, and how to make reusable app templates.
 :::
-<iframe width="805" height="390" src="https://youtube.com/embed/EQxNsDSdpsQ" frameborder="0" allowfullscreen></iframe>
+<iframe width="100%" height="390" src="https://youtube.com/embed/EQxNsDSdpsQ" frameborder="0" allowfullscreen></iframe>
 
 ---
 

docs/deep-dive/plugins-crash-course.md

@@ -18,7 +18,7 @@ In this session, we'll look at three main groups of plugins:
 We'll first learn how `@webiny/plugins` package works outside of Webiny, using [codesandbox.io](https://www.codesandbox.io). Then we'll see how this same package is utilized within the CLI, within Apollo Server (resolvers) and within React apps.
 :::
 
-<iframe width="805" height="390" src="https://youtube.com/embed/4qcDLzu8kVM" frameborder="0" allowfullscreen></iframe>
+<iframe width="100%" height="390" src="https://youtube.com/embed/4qcDLzu8kVM" frameborder="0" allowfullscreen></iframe>
 
 :::info
 Now that we understand the basics of Webiny Plugins, we will continue on practical examples. 
@@ -28,7 +28,7 @@ We will demonstrate how plugins are actually used in your everyday development:
 Also on the API side, we’ll learn what are context plugins and what they are used for, and finally, how we can use plugins to expand our GraphQL schema with additional GraphQL types and resolvers.
 :::
 
-<iframe width="805" height="390" src="https://youtube.com/embed/NGoZ3TDTYus" frameborder="0" allowfullscreen></iframe>
+<iframe width="100%" height="390" src="https://youtube.com/embed/NGoZ3TDTYus" frameborder="0" allowfullscreen></iframe>
 
 ## Anatomy of a plugin
 

docs/get-started/quick-start.md

@@ -12,7 +12,7 @@ For detailed explanations of concepts and processes, see the [Deep Dive](/docs/d
 
 If you prefer the Video version of the Webiny Quick Start, check out our YouTube videos below:
 
-<iframe width="805" height="390" src="https://www.youtube.com/embed/G_du-yE_DL4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe width="100%" height="390" src="https://www.youtube.com/embed/G_du-yE_DL4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ## Prerequisites
 

docs/guides/aws-credentials.md

@@ -8,7 +8,7 @@ This article will guide you through Configuring AWS Credentials.
 
 If you prefer the Video version, check out our YouTube video below:
 
-<iframe width="805" height="390" src="https://www.youtube.com/embed/qmtDRmplMG4" frameborder="0" allowfullscreen></iframe>
+<iframe width="100%" height="390" src="https://www.youtube.com/embed/qmtDRmplMG4" frameborder="0" allowfullscreen></iframe>
 
 To create your AWS account and set up your IAM credentials we should first navigate [here](https://aws.amazon.com/console/):
 

docs/guides/get-started/aws-credentials.md

@@ -8,7 +8,7 @@ This article will guide you through Configuring AWS Credentials.
 
 If you prefer the Video version, check out our YouTube video below:
 
-<iframe width="805" height="390" src="https://www.youtube.com/embed/qmtDRmplMG4" frameborder="0" allowfullscreen></iframe>
+<iframe width="100%" height="390" src="https://www.youtube.com/embed/qmtDRmplMG4" frameborder="0" allowfullscreen></iframe>
 
 To create your AWS account and set up your IAM credentials we should first navigate [here](https://aws.amazon.com/console/):
 

docs/guides/get-started/mongodb-atlas.md

@@ -8,7 +8,7 @@ This article will guide you through Configuring MongoDB Atlas.
 
 If you prefer the Video version, check out our YouTube video below:
 
-<iframe width="805" height="390" src="https://www.youtube.com/embed/GOMvnI-r2qs" frameborder="0" allowfullscreen></iframe>
+<iframe width="100%" height="390" src="https://www.youtube.com/embed/GOMvnI-r2qs" frameborder="0" allowfullscreen></iframe>
 
 > This guide might look long, but it's gonna take you less than 5 minutes to go through it.
 

docs/guides/mongodb-atlas.md

@@ -8,7 +8,7 @@ This article will guide you through Configuring MongoDB Atlas.
 
 If you prefer the Video version, check out our YouTube video below:
 
-<iframe width="805" height="390" src="https://www.youtube.com/embed/GOMvnI-r2qs" frameborder="0" allowfullscreen></iframe>
+<iframe width="100%" height="390" src="https://www.youtube.com/embed/GOMvnI-r2qs" frameborder="0" allowfullscreen></iframe>
 
 > This guide might look long, but it's gonna take you less than 5 minutes to go through it.