Video not looping: Sydney Pro

Hello:
I am building locally on my computer before going live…

I am using the Customize>Header Type> VIDEO with a YOUTUBE Link to display a video on my site’s homepage. However, the video does not loop, it plays through once and then a play button appears.

I have attempted to enable the video to loop by modifying the YOUTUBE URL with (&autoplay=1) and while this works while the CUSTOMIZE>HEADER sidebar is open, once I open the site in a new window, the video reverts back to simply playing once.

Can anyone provide guidance to allow my video to loop?

I see no menu options in CUSTOMIZE>HEADER, and CSS lines seem to lack entries to control this:

/* Video header
-------------------------------------------------------------- */
.video-container .wp-video {
width: 100% !important;
vertical-align: bottom;
}
@media only screen and (min-width: 1025px) {
.video-container .mejs-controls {
display: none !important;
}
}

/* Core video
-------------------------------------------------------------- */
.wp-custom-header video {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
.wp-custom-header iframe {
vertical-align: top;
width:100%;
max-width:100%;

}

.wp-custom-header {
position: relative;
}
.wp-custom-header .wp-custom-header-video-button {
position: absolute;
bottom: 10%;
left: -webkit-calc(50% - 25px);
left: calc(50% - 25px);
height: 50px;
width: 50px;
padding: 0;
border: 0;
border-radius: 50%;
background-color: rgba(51, 51, 51, 0.70);
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.wp-custom-header .wp-custom-header-video-button:hover {
color: #fff;
background-color: #333;
}
.wp-custom-header .wp-custom-header-video-button:focus {
outline: none;
}

Hi,

Really sorry about the delay, we missed your topic.

I just tried it locally and seems to work fine, even without the autoplay parameter. Both with the Customizer open and without it.

Do you have any plugins that might affect this? Some video related plugins?

Hi Vlad,

I’m wondering if this is because the site is built in a local environment? When I host the video on my “server” it does seem to play in a loop properly.

I also noticed that there appears to be two different Youtube links in the code. Why would that be?

I have migrated the site online and kept the link hidden. You can see what I’m working with better here.

Thanks for the reply.

Justin

Hi,

I tried it only locally and the loop works. On the other hand a colleague also checked and for him the loop doesn’t work locally, so not really sure what to say. The thing is that this feature is new in WP core so probably it will be polished over time.

That being said, it doesn’t look like you’re actually using the Video option but rather something custom?

Vlad:

Yes. My workaround for this was to do the following:

Upload the video to the server instead of hosting through Youtube. I know this is a best practice anyways…

Upload the video with the Video Background Plugin

Select full screen slider for the header type

Use a transparent PNG created in Adobe Illustrator to act as the “slide photograph” so that the text and button would appear over the video.

Viola.

I wanted to achieve something like this for my video header.