Videos in a widget on the right side

[MeganCox]

I was watching a recording in the Modern Intranet SIG and came across a business using ECP and doing something I want to do, but I'm unsure how to. 

Here it looks like they have an intranet that has a 9 container and a 3 container on the right. They have it where you can see essentially the whole video there (and even have the see all button to take them to a different page I assume). 

On our intranet, we have the same container layout, but when I try to put a video widget in that smaller container, it comes out looking stretched and weird. 

Is anyone doing something similar to the first picture and can walk me through how to make that happen? I'm a low-code/no-code kind of person, so tell me like I'm 5. Or at least in a way I can copy and paste to my developer to help me fix it. 

Thanks! 

[MeganCox]

So I have the OOB Video Carousel widget in that container on our portal. I went into the widget editor in our test instance, and tried to remove anything I saw where there was a height. Do you by chance know which part of the code from the OOB one is tied to that specific area for me to edit? 

[Juhi Poddar]

@MeganCox 

Optional: Since it is not recommended to make changes in an OOTB widget (changes apply to all pages and may be overwritten on upgrade), clone the widget first and add the cloned version to your target page.

Do the necessary setup to add video in the cloned carousel widget.

Once the cloned widget is ready, apply the following changes:

HTML — wrap both video elements with an aspect ratio container:

<div class="video-aspect-wrapper"> <!-- ADD -->

  <div id="video_{{$index}}_{{data.spInstanceId}}"
       class="youtube-embedded-{{data.spInstanceId}}"
       data-idx="{{$index}}"
       ng-if="item.video_source === 'youtube'"
       ng-class="{'preview-outline': item.is_preview && item.is_content_active == 1,
                  'preview-outline-inactive': item.is_preview && item.is_content_active == 0}">
  </div>

  <iframe id="video_{{$index}}_{{data.spInstanceId}}"
          ng-class="[c.multipleSlides()?'video-player':'video', {...}]"
          ng-src="{{item.url || 'blank.do'}}"
          frameborder="0"
          allowFullScreen="true"
          ng-if="item.video_source === 'unknown'">
  </iframe>

</div> <!-- ADD -->

CSS — remove the fixed height from .video-player, .video:

.video-player,
.video {
  /* height: 400px; */ /* REMOVE this line */
  width: 100%;
}

Then add .video-aspect-wrapper at the very end of the CSS tab:

.video-aspect-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;

  iframe,
  .youtube-player-frame,
  > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

Client Script — remove the hardcoded height in setupYoutubePlayer:

var p = new YT.Player(elId, {
  // height: '400',  // REMOVE this line — CSS wrapper controls height now
  width: '100%',
  videoId: c.data.items[itemIdx].video_source_id,
  ...

Result:

Hope this helps!

Thank You

Juhi Poddar

[Andy Guerriero]

Hi Megan, that's my site! We are hosting videos on a third-party site and using that site's iFrame embed code to embed the video into that widget. The embed code provides the play control and the video plays right within the widget. As others have mentioned, ensure your CSS is not forcing the video thumbnail to contort itself from its normal aspect ratio. 

[MeganCox]

Is that just the HTML widget over there, or is that specifically a video widget? Maybe the rich content widget? 

[Andy Guerriero]

It's the portal rich content widget.