New Tabbed Section + Layer Slider

I am assuming that you are monitoring this thread and will respond to my original request.
Here is another issue with layer slider: Videos embedded into Tabbed Section within the layer slider do not re-scale properly.

Hello Ismael,
Sorry about that. You can check both the issue here: http://visualwilderne.staging.wpengine.com/ (hosted on WPengine)

Top Tabbed Layer Section (Grey) has the layer slider issue. The second Tabbed Layer Section (black) shows the video resealing issue.

To reproduce the issue all you have to do is resize the window.

Hello,

Using a shortcode in a text section. I will find an alternative solution for the Tabbed section and Layer Sliders.

What about the video scaling issue in the second Tab?
-Jay

Hi Ismael,

No this is from WordPress. There are three way you can insert a video in WordPress. One is directly putting a video link (via WordPress’s Oembed technology, next you can use the shortcode [embed][/embed] and the third one is using [video] shortcode. The [embed] shortcode works, however the [video] shortcode does not. [Video] tag was introduce in version 3.6 of WordPress and allows you to set the poster frame and other parameters.

Here is a link: https://codex.wordpress.org/Video_Shortcode

FYI: If you move the tabbed container outside the tab section it works just fine. Here is an example: https://visualwilderne.staging.wpengine.com/

• This reply was modified 7 years, 6 months ago by Jay.

Hello Ismael,

I found a partial solution. I put in the following code in my css file and changed the default the wp-video class (defined by wordpress to be 640px) to 100%. Seem to solve the issue while scaling down…but not when scaling up.

/** Default Video Size **/
.wp-video {width: 100% !important;}

You guys may still want to look at why this does not work the same way in Tabbed Section as it does in the regular tabs. There may be some conflict there.

• This reply was modified 7 years, 6 months ago by Jay.

It is a partial work around…The video does not resize correctly when scaling up when Accordion on small screen changes to Tabbed Section. It would appear that there is no resize event being fired when this happens. Here is how to reproduce the issue:

• Scale down the width of the screen.
• Click on Tab 2
• Scale up the width until the Accordion changes to Tab Layout.
• Go to Tab 1 and you will notice that the video is not aligned properly (scale is correct, but it fails to align to the top).

I hope you guys can provide a fix for me either via CSS or function.php modification.

• This reply was modified 7 years, 6 months ago by Jay.