Video Responsive - component setting

558/5000 Now when I use the component "Video Responsive Youtube", as in the options I will change to Facebook and give the appropriate link + autoplay. It's ok but it plays without sound. Is it possible to fire immediately with sound?

The second thing I have problem is that this video was reponsive. How to make its size automatically adjust to the displayed screen (phone / ipad / monitor)

In the video options I have set a specific width and height, should be the word auto?

Main -> Section -> Container -> ROW -> Column -> Heading video Responsive Heading Heading

If i change for auto width and height (option for video), the video it's so small.

I trying to fix that, but not good resolve.

I put the video componnet in Row->Column -> Video Responsive Youtube. It's better but :

If i check this on a big screen, the height video is cut. When i check on mobile is fine.

If i set Min height for 280px, i have fine on big screen, but on mobile too, but there is a empty space... coming from video. Don't know how to set this on auto.

Video (option) w/h is set auto Video appearance for width is set for 500px, min w auto, max w 100% a) Video appearance for height is set auto, min auto, max height 100%. - cutting on big screen b) Video appearance for height is set auto, min 280, max height 100%. - no cutting, but add space on mobile below the video

Strange after change option for video from youtube, not facebook. Everything start to work like it should be.

Guess Iā€™m a little late to the party, but what has worked for me is:

  • Do not use absolute values (px) for width and height
  • Use percentage for width, auto for height and the video will resize nicely to device screen size

enter image description here

UPDATE -- Adding a ROW and COLUMN is not necessary to get the video to display perfectly. You can ignore these as desired.

I have wasted time trying to make this work. It SHOULD be simple, but isn't :-(

Inside BODY create a CONTAINER.
Inside CONTAINER create a ROW.
Inside ROW create a COLUMN.
Inside COLUMN create a RESPONSIVE EMBED.

Right-click RESPONSIVE EMBED >>> CONVERT TO HTML.
Right-click CUSTOM CODE >>> EDIT CODE.

Replace

<iframe> ....... </iframe>

with the iframe code from the YouTube video, so the whole CUSTOM CODE is as follows... Click APPLY:

<div class="embed-responsive embed-responsive-16by9"><iframe width="1280" height="720" src="https://www.youtube.com/embed/_BtYctonMTQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

Sadly this does not display the video in BSS, but PREVIEW displays it properly and it scales perfectly.

1 Like