Activating 3rd Interaction Scales Down All Embed Videos

Design help Custom code
1

Hey friends!

So on my portfolio page (read only link here), I have three image covers and three corresponding embeds (vimeo videos).

I’m using this script so that when I click the image it triggers the vimeo autoplay:

<script>
  $('Image1').on('click', function(e) {
    var $video = $('#Video1');
    src = $video.attr('src');
    $video.attr('src', src + '?autoplay=1');
  });
  $('#Image2').on('click', function(e) {
    var $video = $('#Video2');
    src = $video.attr('src');
    $video.attr('src', src + '?autoplay=1');
  });
  $('#Image3').on('click', function(e) {
    var $video = $('#Video3');
    src = $video.attr('src');
    $video.attr('src', src + '?autoplay=1');
  });
</script>

It works great! Tested. This isn’t the issue. There’s something going on with the interactions.

I have each set so that a click on the image hides it and reveals the hidden embed.

Here’s the problem: when I click a third video, all three videos scale down to a much smaller size. What it looks like after two interactions:

Ref 1
Ref 11375×877 99.6 KB

What it looks like after three interactions, videos scaled down:

Ref 2
Ref 21370×854 61.6 KB

Doesn’t matter what order. Can play 3rd video then 1st and then 2nd (the 3rd interaction) will scale them all down. There’s something about three interactions with the embeds going on.

When they’re all in their own divs still happens.

Any ideas?

Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)

2

I solved it! It wasn’t with the embed. It had to do with some auto-sizing with a container.

Thanks all who gave this consideration!