/    Sign up×
Community /Pin to ProfileBookmark

Can I have my YouTube video play immediately after thumbnail image is clicked?

At the moment I have the following code below which displays a thumbnail image and then when the thumbnail is clicked it loads the YouTube player – this was done in order to make the page load quicker initially.

My goal is to load the YouTube player and start playing the video when the image thumbnail is clicked – as at the moment the user has to click on the thumbnail then once again click play on the YouTube player that is made visible. 

Below you can see how this work as of now in a video player:


Below you can find the code I am using to generate this thumbnail:

    $videoId = '';
    if (preg_match('/v=([^&]+)/', $vlesson->video_url, $matches)) {
        $videoId = $matches[1];
    // Use the static thumbnail URL you provided
    $video_thumb = '/images/play_button_thumbnail.jpg';

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
        src="https://www.youtube.com/embed/{{ $videoId }}?autoplay=1"
        srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href='https://www.youtube.com/embed/{{ $videoId }}?autoplay=1'><img src='{{ $video_thumb }}' alt='Video'><span>▶</span></a>"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        title="{{ $vlesson->title ?? 'YouTube Video' }}">  {{-- Assuming you might have a title field in vlesson --}}


Please note this is a Blade file.

If anyone has any input on how I can make it 1 click thumbnail to play it would be so greatly appreciated!

Thank you!

to post a comment

0Be the first to comment 😎



Help @PleaseJustAnswer spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 12.9,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: @bahaedd,
tipped: article
amount: 1000 SATS,

tipper: @Balmasexy,
tipped: article
amount: 1000 SATS,

tipper: @mbsaad,
tipped: article
amount: 1000 SATS,