HTML Video (Responsive Vertical Height)

Hi,

Wondered if anyone can provide some help with this. I’ve just put an HTML element into a cell of a repeating group and it looks like this…

<html> 
<body> 

<div style="text-align:center">
  <video id="video1" width="166" preload="metadata" muted onclick="if (typeof InstallTrigger == 'undefined') (this.paused ? this.play() : this.pause()); bubble_fn_2('video clicked');">
    <source src="Parent group's Listing's List of Images's URL Video#t=0.1" type="video/webm">
    <source src="Parent group's Listing's List of Images's URL Video#t=0.1" type="video/mp4">
    <source src="Parent group's Listing's List of Images's URL Video#t=0.1" type="video/ogv">
    Your browser does not support HTML5 video
  </video>
</div>

<style>
  #video1 { height: 100vh }
</style>

</body> 
</html>

The problem is that the height of the video needs to adjust dynamically, the width isn’t a problem but to maintain the full height I can’t get it move everything down in the RG. I’ve tried playing with the option of “Stretch to fit content” but it seems the mismatch of what you can do (or should do) as part of the CSS inside the HTML can counteract what ever that stretch to fit contents option down. Either way, I can’t find the correct combinations of what to set to make it look correct.

image

I admit most of what I’m trying here I don’t fully understand, I was hoping something may work just by playing around with the Style options. The best I have it right now is like this but I have a horrible white space at the top and bottom of the video!

<style>
  #video1 { height: 100vh; min-height: 100%; }
</style>

Here’s an example of the problem if anyone would be so kind to figure out how to resolve this.

Thanks,
Paul

Hi @pork1977gm - here’s a video from @romanmg that may help you with RG responsiveness.

1 Like

cool ty

For anyone reading this, I ended up with the following in a HTML element and unticked the “Stretch to fit content” option (set the video height and element height the same and wrapped the div up in a container with some styling) - this was fine for my purposes…

<!DOCTYPE html>
<html>
  <body>
    
    <div class="wrapper2">
      <video class="video2" id="video2" preload="metadata" poster="Parent group's Listing's List of Images:filtered's URL Video Thumbnail" playsinline muted onclick="this.paused ? this.play() : this.pause(); bubble_fn_2('video clicked')">
        <source src="Parent group's Listing's List of Images:filtered's URL Video" type="video/webm">
        <source src="Parent group's Listing's List of Images:filtered's URL Video" type="video/mp4">
        <source src="Parent group's Listing's List of Images:filtered's URL Video" type="video/ogg">
      Your browser does not support HTML5 video
      </video>
      <div id="playButton2" class="playButton2"></div>
    </div>
    
    <style>
      .video2 {
        position: relative;
        top: 0;
        left: 0;
        width: 100%; 
        height: 180px;
        object-fit: cover;
      }
      
      .wrapper2 {
        width:auto;
      }
      
      .playButton2 {
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 25px 0 25px 50px;
        border-color: transparent transparent transparent #C7C7C7;
        opacity: 0.7;
        position: absolute;
        top:0;
        left:0;
        right:-10px;
        bottom:0;
        margin: auto;
        pointer-events: none;
      }
    </style>
    
  </body>
</html>

Thanks for sharing. I’ve been wrestling with this. What did this js do?
bubble_fn_2('video clicked')

Sorry for the delay @scottb50, that line puts the value “video clicked” into the ‘JavaScript to Bubble’ event so I could use it in my workflows. You can probably remove that for your purposes, I had it because I wanted a workflow to fire off when it was clicked and since it was buried knee deep in a repeating group and inside a draggable group, it was the only way I could get that HTML element launch a workflow when clicked.

This topic was automatically closed after 70 days. New replies are no longer allowed.