Fix responsive videos

The videos were breaking the layout of the documentation pages and making it difficult to click on the right menu items. Also tackled the Japanese translated pages.
2021-08-04 09:42:59 -04:00 · 2021-08-04 09:42:59 -04:00 · 5c8a0f9f4d
parent de457ac1b5
commit 5c8a0f9f4d
15 changed files with 47 additions and 10 deletions
--- a/daprdocs/content/en/concepts/overview.md
+++ b/daprdocs/content/en/concepts/overview.md
@ -9,7 +9,9 @@ description: >

 Dapr is a portable, event-driven runtime that makes it easy for any developer to build resilient, stateless and stateful applications that run on the cloud and edge and embraces the diversity of languages and developer frameworks.

-<iframe width="1120" height="630" src="https://www.youtube.com/embed/9o9iDAgYBA8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="embed-responsive embed-responsive-16by9">
+  <iframe width="1120" height="630" src="https://www.youtube.com/embed/9o9iDAgYBA8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

 ## Any language, any framework, anywhere

@ -118,4 +120,4 @@ Dapr is designed for [operations]({{< ref operations >}}) and security. The Dapr

 The [services dashboard](https://github.com/dapr/dashboard), installed via the Dapr CLI, provides a web-based UI enabling you to see information, view logs and more for the Dapr sidecars.

-The [monitoring tools support]({{< ref monitoring >}}) provides deeper visibility into the Dapr system services and side-cars and the [observability capabilities]({{<ref "observability-concept.md">}}) of Dapr provide insights into your application such as tracing and metrics.
+The [monitoring tools support]({{< ref monitoring >}}) provides deeper visibility into the Dapr system services and side-cars and the [observability capabilities]({{<ref "observability-concept.md">}}) of Dapr provide insights into your application such as tracing and metrics.
--- a/daprdocs/content/en/developing-applications/building-blocks/actors/howto-actors.md
+++ b/daprdocs/content/en/developing-applications/building-blocks/actors/howto-actors.md
@ -137,7 +137,9 @@ The number of repetitions i.e. the number of times the reminder is run should be

 Watch this [video](https://www.youtube.com/watch?v=B_vkXqptpXY&t=1002s) for more information on using ISO 861 for Reminders

+<div class="embed-responsive embed-responsive-16by9">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/B_vkXqptpXY?start=1003" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

 #### Retrieve actor reminder

@ -385,4 +387,4 @@ For production scenarios, there are some points to be considered before enabling
 * Number of partitions can only be increased and not decreased. This allows Dapr to automatically redistribute the data on a rolling restart where one or more partition configurations might be active.

 #### Demo
-* [Actor reminder partitioning community call video](https://youtu.be/ZwFOEUYe1WA?t=1493)
+* [Actor reminder partitioning community call video](https://youtu.be/ZwFOEUYe1WA?t=1493)
--- a/daprdocs/content/en/developing-applications/building-blocks/bindings/howto-bindings.md
+++ b/daprdocs/content/en/developing-applications/building-blocks/bindings/howto-bindings.md
@ -10,8 +10,10 @@ Output bindings enable you to invoke external resources without taking dependenc
 For a complete sample showing output bindings, visit this [link](https://github.com/dapr/quickstarts/tree/master/bindings).

 Watch this [video](https://www.youtube.com/watch?v=ysklxm81MTs&feature=youtu.be&t=1960) on how to use bi-directional output bindings.
-<iframe width="560" height="315" src="https://www.youtube.com/embed/ysklxm81MTs?start=1960" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

+<div class="embed-responsive embed-responsive-16by9">
+<iframe width="560" height="315" src="https://www.youtube.com/embed/ysklxm81MTs?start=1960" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

 ## 1. Create a binding

@ -93,4 +95,4 @@ You can check [here]({{< ref supported-bindings >}}) which operations are suppor

 - [Binding API]({{< ref bindings_api.md >}})
 - [Binding components]({{< ref bindings >}})
- [Binding detailed specifications]({{< ref supported-bindings >}})
+- [Binding detailed specifications]({{< ref supported-bindings >}})
--- a/daprdocs/content/en/developing-applications/building-blocks/pubsub/pubsub-scopes.md
+++ b/daprdocs/content/en/developing-applications/building-blocks/pubsub/pubsub-scopes.md
@ -158,7 +158,9 @@ The table below shows which application is allowed to subscribe to the topics:

 ## Demo

+<div class="embed-responsive embed-responsive-16by9">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/7VdWBBGcbHQ?start=513" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

 ## Related links

--- a/daprdocs/content/en/developing-applications/building-blocks/secrets/secrets-scopes.md
+++ b/daprdocs/content/en/developing-applications/building-blocks/secrets/secrets-scopes.md
@ -14,7 +14,10 @@ To limit the secrets to which the Dapr application has access to, you can define
 The secret scoping policy applies to any [secret store]({{< ref supported-secret-stores.md >}}), whether that is a local secret store, a Kubernetes secret store or a public cloud secret store. For details on how to set up a [secret stores]({{< ref setup-secret-store.md >}}) read [How To: Retrieve a secret]({{< ref howto-secrets.md >}})

 Watch this [video](https://youtu.be/j99RN_nxExA?start=2272) for a demo on how to use secret scoping with your application.
+
+<div class="embed-responsive embed-responsive-16by9">
 <iframe width="688" height="430" src="https://www.youtube.com/embed/j99RN_nxExA?start=2272" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

 ## Scenario 1 : Deny access to all secrets for a secret store

--- a/daprdocs/content/en/developing-applications/debugging/bridge-to-kubernetes.md
+++ b/daprdocs/content/en/developing-applications/debugging/bridge-to-kubernetes.md
@ -14,7 +14,9 @@ Bridge to Kubernetes allows you to run and debug code on your development comput

 Bridge to Kubernetes supports debugging Dapr apps on your machine, while still having them interact with the services and applications running on your Kubernetes cluster. This example showcases Bridge to Kubernetes enabling a developer to debug the [distributed calculator quickstart](https://github.com/dapr/quickstarts/tree/master/distributed-calculator):

+<div class="embed-responsive embed-responsive-16by9">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/rxwg-__otso" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

 {{% alert title="Isolation mode" color="warning" %}}
 [Isolation mode](https://aka.ms/bridge-isolation-vscode-dapr) is currently not supported with Dapr apps. Make sure to launch Bridge to Kubernetes mode without isolation.
--- a/daprdocs/content/en/developing-applications/ides/vscode/vscode-dapr-extension.md
+++ b/daprdocs/content/en/developing-applications/ides/vscode/vscode-dapr-extension.md
@ -63,4 +63,7 @@ Using the VS Code extension, you can debug multiple Dapr applications at the sam
 ### Community call demo

 Watch this [video](https://www.youtube.com/watch?v=OtbYCBt9C34&t=85) on how to use the Dapr VS Code extension:
+
+<div class="embed-responsive embed-responsive-16by9">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/OtbYCBt9C34?start=85" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
--- a/daprdocs/content/en/developing-applications/ides/vscode/vscode-remote-dev-containers.md
+++ b/daprdocs/content/en/developing-applications/ides/vscode/vscode-remote-dev-containers.md
@ -28,4 +28,7 @@ Dapr has pre-built Docker remote containers for NodeJS and C#. You can pick the

 #### Example
 Watch this [video](https://www.youtube.com/watch?v=D2dO4aGpHcg&t=120) on how to use the Dapr VS Code Remote Containers with your application.
-<iframe width="560" height="315" src="https://www.youtube.com/embed/D2dO4aGpHcg?start=120" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+<div class="embed-responsive embed-responsive-16by9">
+<iframe width="560" height="315" src="https://www.youtube.com/embed/D2dO4aGpHcg?start=120" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
--- a/daprdocs/content/en/developing-applications/integrations/open-service-mesh.md
+++ b/daprdocs/content/en/developing-applications/integrations/open-service-mesh.md
@ -22,7 +22,9 @@ Users are able to leverage both OSM SMI traffic policies and Dapr capabilities o

 Watch the OSM team present the OSM and Dapr integration in the 05/18/2021 community call:

+<div class="embed-responsive embed-responsive-16by9">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/LSYyTL0nS8Y?start=1916" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

 ## Additional resources

--- a/daprdocs/content/en/developing-applications/integrations/workflows.md
+++ b/daprdocs/content/en/developing-applications/integrations/workflows.md
@ -221,7 +221,9 @@ Prerequisites:

 Watch an example from the Dapr community call:

+<div class="embed-responsive embed-responsive-16by9">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/7fP-0Ixmi-w?start=116" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

 ## Additional resources

--- a/daprdocs/content/en/operations/components/component-scopes.md
+++ b/daprdocs/content/en/operations/components/component-scopes.md
@ -119,7 +119,9 @@ scopes:

 ## Example

+<div class="embed-responsive embed-responsive-16by9">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/8W-iBDNvCUM?start=1763" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

 ## Related links

--- a/daprdocs/content/en/operations/configuration/control-concurrency.md
+++ b/daprdocs/content/en/operations/configuration/control-concurrency.md
@ -14,7 +14,10 @@ Using Dapr, you can control how many requests and events will invoke your applic
 *Note that rate limiting per second can be achieved by using the **middleware.http.ratelimit** middleware. However, there is an imporant difference between the two approaches. The rate limit middlware is time bound and limits the number of requests per second, while the `app-max-concurrency` flag specifies the number of concurrent requests (and events) at any point of time. See [Rate limit middleware]({{< ref middleware-rate-limit.md >}}). *

 Watch this [video](https://youtu.be/yRI5g6o_jp8?t=1710) on how to control concurrency and rate limiting ".
+
+<div class="embed-responsive embed-responsive-16by9">
 <iframe width="764" height="430" src="https://www.youtube.com/embed/yRI5g6o_jp8?t=1710" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

 ## Setting app-max-concurrency

@ -58,4 +61,4 @@ To set app-max-concurrency with the Dapr CLI for running on your local dev machi
 dapr run --app-max-concurrency 1 --app-port 5000 python ./app.py
 ```

-The above examples will effectively turn your app into a single concurrent service.
+The above examples will effectively turn your app into a single concurrent service.
--- a/daprdocs/content/en/operations/configuration/invoke-allowlist.md
+++ b/daprdocs/content/en/operations/configuration/invoke-allowlist.md
@ -11,7 +11,10 @@ Access control enables the configuration of policies that restrict what operatio
 An access control policy is specified in configuration and be applied to Dapr sidecar for the *called* application. Example access policies are shown below and access to the called app is based on the matched policy action. You can provide a default global action for all calling applications and if no access control policy is specified, the default behavior is to allow all calling applications to access to the called app.

 Watch this [video](https://youtu.be/j99RN_nxExA?t=1108) on how to apply access control list for service invocation.
+
+<div class="embed-responsive embed-responsive-16by9">
 <iframe width="688" height="430" src="https://www.youtube.com/embed/j99RN_nxExA?start=1108" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

 ## Concepts

@ -353,4 +356,4 @@ spec:
      containers:
      - name: python
        image: dapriosamples/hello-k8s-python:edge
- ```
+ ```
--- a/daprdocs/content/en/operations/monitoring/metrics/grafana.md
+++ b/daprdocs/content/en/operations/monitoring/metrics/grafana.md
@ -173,4 +173,7 @@ First you need to connect Prometheus as a data source to Grafana.
 * [Supported Dapr metrics](https://github.com/dapr/dapr/blob/master/docs/development/dapr-metrics.md)

 ## Example
+
+<div class="embed-responsive embed-responsive-16by9">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/8W-iBDNvCUM?start=2577" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
--- a/daprdocs/content/en/operations/monitoring/metrics/prometheus.md
+++ b/daprdocs/content/en/operations/monitoring/metrics/prometheus.md
@ -111,9 +111,12 @@ dapr-prom-prometheus-server-694fd8d7c-q5d59         2/2     Running   0
 ```

 ## Example
-<iframe width="560" height="315" src="https://www.youtube.com/embed/8W-iBDNvCUM?start=2577" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+<div class="embed-responsive embed-responsive-16by9">
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/8W-iBDNvCUM?start=2577" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

 ## References

 * [Prometheus Installation](https://github.com/prometheus-community/helm-charts)
-* [Prometheus Query Language](https://prometheus.io/docs/prometheus/latest/querying/basics/)
+* [Prometheus Query Language](https://prometheus.io/docs/prometheus/latest/querying/basics/)