Ijility las vegas warehouse address atlanta ga.REGISTER NOW GET FREE 888 PESOS REWARDS!

engbok
(@engbok)

4 years ago

Hi
I am put SA slider free version in my front page after menu with this code in header:

<?php
echo do_shortcode(“[slide-anything id=’???’]”);
?>

I tested with an image and a video. I set the min Height to 16:9.

in respective slide, i set the width to 100%. for instant, youtube video embed code as below:

<iframe width=”100%” src=”https://www.youtube.com/embed/XXXXXXXXXX” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

image code :

The problem is the height of this 2 slide is different. You can see from the image below:
image looks ok in PC
https://drive.google.com/file/d/1F0IzLEFLecX1weewNNZug9eeNwmgBVKS/view?usp=sharing

but youtube video is out of shape:
https://drive.google.com/file/d/1OpCcYG9vvm8F4v5FQdpRKiZTfKoAP5Cp/view?usp=sharing

If i fix the height of the youtube video until it looks ok in PC, the video will be out of shape in tablet and handphone, which is abnormally tall.

How can I solve this problem?

This is my setting n SA slider:
https://drive.google.com/file/d/1aTy1rfla4Poks8KqEcM_IvHYOZpGSjHU/view?usp=sharing
&
https://drive.google.com/file/d/16dbJSnmXM6GAptlpNC5_UznevgVdlq09/view?usp=sharing

Thank you.

The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author simonpedge
(@simonpedge)

4 years ago
Well firstly the 16:9 min-height is working – if you look at the height allocated to each slide content , i.e. where the pagination dots are, you will see that it is allocating this space. Now you just need to get the the slide content (YT video) to use this space.

Try inserting the following HTML into your slide for the YT video:
```
<div>
<iframe width=”100%” src=”https://www.youtube.com/embed/XXXXXXXXXX” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
</div>
```
And then add the following CSS Style:
```
#slider_425 .sa_hover_container div {
   position:relative !important;
}
#slider_425 .sa_hover_container div iframe{
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    width: 100% !important;
    height: 100% !important;
}
```
This should do the trick.
If you want to remove the padding around each slide, you can do this within the slider settings. Also the image in slide 1 does not look like its 16:9 – maybe use ‘slide backgrounds’ instead of ‘‘ (insert media) tags.

Let me know how you get on.
Thread Starter engbok
(@engbok)

4 years ago
I have added the css style to my theme via theme editor, I put at the bottom of css section.

Then i write <div> and </div> before and after the iframe code of youtube video.

Youtube video can’t display, please see the slide 2:

https://uahmusic.com/
- This reply was modified 4 years ago by engbok.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Video Height different in tab/phone/PC’ is closed to new replies.

Tags