Gymlife - Video play btn over image

Website Templates
1

Good Morning,
I’m not sure if your support offers help on customising the free html sites. I’m attempting to add a video play button over images, using code from another page which does the same thing.

I can position the button over the image, but it is very small and I lose the coloured circle around it. I realise this is probably because the containers are different, but my html skill has reached it limit.

If you don’t offer this level of support, can I be contact information of the original author of the template.

`<!-- About US Section Begin -->
<section class="aboutus-section">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 p-0">
                <div class="about-video set-bg" data-setbg="img/about-us1.jpg">
                    <a href="https://www.youtube.com/watch?v=IRkae0GuvYc" class="play-btn video-popup">
					<i class="fa fa-caret-right"></i></a>
                </div>
            </div>
            <div class="col-lg-6 p-0">
                <div class="about-text">
                    <div class="section-title">
                        <span>Meet Your Coach</span>
                        <h2>Anders Mankert</h2>
                    </div>
                    <div class="at-desc">
                        <p>Swedish born Anders has earned a nationwide reputation for his skill, passion and unrivalled patience in teaching golfers of all abilities.</p>

<p>Holding 3 course records and named by influential magazine ’Todays Golfer’ as one of the UKs top 40 teaching Pros at the age of 25. In 2018 he was voted UK’s top instructor in the Best of UK Business Awards. Throughout his career he has worked with numerous England Team players as well as Tour Professional winners on European Challenge Tour, European Seniors Tour and even The Grey Goose Tour, USA.</p>

<p>Passionate about helping blind people enjoy the game, he has voluntarily coached for over 25 years, producing numerous winners from coaching at the World Championships, the Blind British Open, the? Australian Open and other titles. Most recently working with players from team ‘Rest of the World’ vs USA. </p>
</div>

                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;
&lt;!-- About US Section End --&gt;`

(See ‘original-btn’ image)

Below: html for btn over new i,age (only first image in section supplied)

<div class="row">
                <div class="col-lg-3 order-lg-1 col-md-6 p-0">
                    <div class="ss-pic">
                      <div class="about-videos set-bg" data-setbg="img/services/services-1.jpg">
					    <a href="https://www.youtube.com/watch?v=IRkae0GuvYc" class="play-btn video-popup"><i
                                class="fa fa-caret-right"></i></a>
                    </div>
                    </div>
                </div>

Thank You

2

I’ve managed to track it down a bit. I made a new css for the small image box and this is causing the btn sizing problem somehow.

.about-video {
	height: 640px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.about-videos {
	height: 293px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.about-video .play-btn {
	display: inline-block;
	height: 70px;
	width: 70px;
	background: #61d0e9;
	border-radius: 50%;
	line-height: 70px;
	text-align: center;
	font-size: 36px;
	color: #ffffff;
}
3

Sorry to be such a pain, I’ve been working on this and other parts of the site for days and could be posting just before I start to see how to correct things.

This is strange, if I add .about videos to the css rule .about-video .play-btn I get a small button and no circle

.about-video .about-videos .play-btn {
display: inline-block;
height: 70px;
width: 70px;
background: #61d0e9;
border-radius: 50%;
line-height: 70px;
text-align: center;
font-size: 36px;
color: #ffffff;
}

but if I create a separate css rule, which is exactly the same, just for .about-videos .play-btn it works

.about-videos .play-btn {
display: inline-block;
height: 70px;
width: 70px;
background: #61d0e9;
border-radius: 50%;
line-height: 70px;
text-align: center;
font-size: 36px;
color: #ffffff;
}

4

Hey there

Im so sorry to say but at this moment we are unable to provide any customization character support questions in the support, please take my apologies on this, cant cover such requests at this moment, I hope you understand :slight_smile:

With best regards