Video element autoplay youtube

[Peter789]

Hi there,

How can I re-create this video element to work like this:

reference video element

I have tried to re-create it with modal, but it’s not that it…

I want when I click on it to open youtube link and play the video just like i showed you in the reference video

[christian]

Hey Katarina,

There’s no option in the Video element to autoplay an embedded video. You need to check the documentation of the video provider to learn how to autoplay their video embed. For Youtube for example, you need to add ?autoplay=1 to the URL in the embed code. Check out the Youtube documentation here https://developers.google.com/youtube/player_parameters

Also, add this Custom Attribute in the Video element to stop the video from playing when you close the Modal.

data-rvt-offscreen-reset

Just add it as a Name. No Value needed.

Thanks.

[Peter789]

Hi Chris,

How it is not possible to make something like this?

reference 2

Also, where should I paste the code u mentioned above?

[christian]

Hey Katarina,

We currently don’t have an element that would set a thumbnail for embedded videos. The Modal element is the closest you could use.

Regarding the autoplay code, it should be added to the Youtube URL. Please take a look at the screenshot closely especially the yellow highlight. See that it’s attached in the URL.

If that is still not clear, please refer to Youtube’s documentation I’ve previously posted.

Thanks.

[Peter789]

Hi Chris,

Thanks! I did what you told me and It is totally okay like this

Also, could you let me know how to fix this close button inside the modal element?
See: https://youtu.be/zDltW0htz_E

[ruenel]

Hello Katarina,

Please edit your Modal element and in the Toggle settings, Modal > Toggle > Size, set the width and height to auto.

And if this is a button element, please make sure that the width is decent enough to display on a particular screen size.

Best Regards.

[Peter789]

Hi @ruenel @christian ,

That doesn’t work for me, the close button is still not showing properly… https://prnt.sc/JivT7HgS6-C9

Also, how can I make the modal button (PLAY BUTTON) to be the Image background-size so when I click anywhere on the background it opens the modal?

This is what I mean: https://youtu.be/Ka8beOTeA5E

[marc_a]

Hey Kate,

The problem with your close modal button is that there’s a pre-defined CSS for the default close modal that is overriding your custom button CSS.

It happen because you added the x-modal-closeCSS class in your custom button.

To fix your issue, I suggest changing the CSS class name to something else.

On the other hand, to make your button fit the whole video, please follow the instruction below.

• To go Modal > Toggle and then remove the main/hover background color ( set it to transparent )
  
• Set the height and width to 100%
  
• Set the border radius to 0
  

Lastly, in your modal custom element CSS, please add this code.

$el .x-graphic {
  padding: 30px;
  background-color: #0033ff;
  border-radius: 100%;
}
$el:hover .x-graphic {
  background-color: #0029cc;
}

Just change the padding 30px value to change the button background size. Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

[Peter789]

Hi Marc,

Thanks for the detailed explanation

I did the steps that you told me and this is now the problem: https://youtu.be/qj5fAKcNQHc

Also, the circle of the play button is not much of a “circle” it is more like an egg. And the play icon is not in the center, how can I margin-right: 4px; the play icon without moving everything?

[marc_a]

Hey Kate,

Please update the element CSS to this one:

$el .x-graphic {
  padding: 34px 36px;
  background-color: #0033ff;
  border-radius: 100%;
}
$el:hover .x-graphic {
  background-color: #0029cc;
}

.yt-modal-close .x-graphic {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

[Peter789]

Hi Marc,

Thanks for the code you provided! That fixed my issue

I really appreciate your help

All the best,
Kate

[prakash_s]

Hello Kate,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks

[Peter789]

Hey guys! @christian @marc_a @ruenel

The solution we made is great and thanks guys for that!

But I figured out how they made this work exactly like in the reference video: https://youtu.be/m88BNkOgkTM

I think it is a SLIDER ELEMENT:

• 1 SLIDER is a picture with a custom play button

• 2 SLIDER is the youtube video code with ?autoplay=1 in the URL

Basically when click on the picture with the button. THE button is a “NEXT SLIDE” button, and when you click on it it opens the 2nd slider and plays the YT video.

Hopefully, you understood me, sorry for my bad English.

So, could you help me to re-create that to work in action?

[ruenel]

Hello Katarina,

Be advised that the example site is not using WordPress. The page is using a slider that on the first slide, it displays the PLAY button.

As soon as you hit the “PLAY” button, there is a custom event listener that triggers which then opens up the next slide that has the embedded video in it. The event listener forces video automatically plays as well.

You may be able to replicate this by using the Slider element in theme. Still, you will encounter issues because as mentioned by @Christian, “there’s no option in the Video element to autoplay an embedded video”. If ever the video automatically plays, your users have to stop the video first before going to the next slide because the slider does not have any control over the embed video inside the slide.

Hope this makes sense.

[Peter789]

Hi Ruenel,

Thanks for the detailed explanation

I understand, will be there an update for the theme in the future to fix this?

[tristup]

Hi Katarina,

Glad that we are able to explain it to you.

Thanks