Change ratio of embedded Videos

It's possible to embed video's into articles or comments. Videos have been proven to demand more consumer attention than any other medium.

Articles are more engaging, and keep viewers on the page for a longer time.

While every user can embed video (or other media) to their content or comments; content- and site managers have the rights to tweak the ratio of the video when the video is added to a topic, book page, basic page or event.

Add a video from youtube

Embed a youtube video using the button in the editor. for example this one https://www.youtube.com/watch?v=S2XE4zdWEnc

Open Social gives every video the same ratio.

If you feel the ratio should be different so the content looks nicer (for example fills out the whole width of the content area), you can change the ratio.

Change Video Ratio

1. Go to `source` mode. You will see the the video you just have inserted is written like:

drupal code

2. Wrap the code with a class, by adding some code before and after it:

<div class="embed-responsive embed-responsive-1by1">

<drupal-url data-embed-button="url" data-embed-url="https://www.youtube.com/watch?v=S2XE4zdWEnc" data-entity-label="URL" data-url-provider="YouTube"></drupal-url>

</div>

3. Click on the `source` button to see the result in the editor, and save it to see the final result.

Possible Ratio's

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <drupal-url data-embed-button="url" data-embed-url="........" data-entity-label="URL" data-url-provider="...."></drupal-url>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9"> 

<drupal-url data-embed-button="url" data-embed-url="........" data-entity-label="URL" data-url-provider="...."></drupal-url>

</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3"> 

<drupal-url data-embed-button="url" data-embed-url="........" data-entity-label="URL" data-url-provider="...."></drupal-url>

</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">

<drupal-url data-embed-button="url" data-embed-url="........" data-entity-label="URL" data-url-provider="...."></drupal-url>

</div>

Final result

Here is an example of an embedded video with ratio 1:1