Member Avatar for SimonIoa

I have done a script that displays only an image of a the video when the user uploads one. The thing is that i want the video to start when the users clicks on the image but now when the user clicks the video appears with no autoplay.

here is the code

<div class="img_container"> <a href="#." id="video_thumb_<?php echo $id;?>" style="display:block;" 
    onClick="javascript:loadVideo(\'<?php echo $id;?>\')"> <img src='<?php echo $my_thumb;?>' class="imgpreview" /> </a> <div style="display:none;" 
        id="video_<?php echo $id;?>"?autoplay="1"></div>';




 <script>
    function loadVideo(input){
        document.getElementById("video_thumb_"+input).style.display="none";
        document.getElementById("video_"+input).style.display="block";
    }
</script>
  • 1 Contributor
  • 4 Replies
  • 278 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by SimonIoa

Dani AI

Generated

As discovered, adding an autoplay flag to the iframe makes the browser load and play the embed as soon as the iframe src is present — even if the iframe is hidden. The reliable fix is to delay giving the iframe a src until the user actually clicks the thumbnail (or to create the iframe on click). That guarantees the click is the user gesture that starts playback and prevents autoplay on page load.

Example: keep a thumbnail anchor with a data attribute that holds the embed URL, and on click create the iframe and insert it into the container. This also avoids the “click twice” symptom caused by showing an already-loaded iframe that wasn’t set to autoplay.

<a href="#" class="video-thumb" data-src="https://www.youtube.com/embed/VIDEOID" data-target="video_123">
  <img src="THUMB.jpg" alt="video thumbnail">
</a>
<div id="video_123" class="video-wrap"></div>

<script>
document.querySelectorAll('.video-thumb').forEach(function(thumb){
  thumb.addEventListener('click', function(e){
    e.preventDefault();
    var wrap = document.getElementById(this.dataset.target);
    var src = this.dataset.src + '?autoplay=1&rel=0';
    var ifr = document.createElement('iframe');
    ifr.setAttribute('src', src);
    ifr.setAttribute('width', '560');
    ifr.setAttribute('height', '315');
    ifr.setAttribute('frameborder', '0');
    ifr.setAttribute('allow', 'autoplay; encrypted-media');
    ifr.setAttribute('allowfullscreen', '');
    wrap.appendChild(ifr);
    this.style.display = 'none';
  });
});
</script>

Notes: use the /embed/ URL (not watch?v=) and include allow="autoplay" and allowfullscreen. If a browser still blocks autoplay, it’s due to modern autoplay policies — muting (&mute=1) or relying on the explicit click gesture are the usual workarounds.

Member Avatar for SimonIoa

ok i got it...

<iframe class="new" width="'.$w.'" height="'.$h.'" src="'.$this->data["iframe"].'?autoplay=1" frameborder="0" allowfullscreen></iframe>

Member Avatar for SimonIoa

i thought that was it but the video starts when page refresh

Member Avatar for SimonIoa 
$orimessage = 'https://www.youtube.com/watch?v=m5N9IHqqGcA';

if(textlink($orimessage))
{
    $link =textlink($orimessage);
    $em = new Wall_Expand($link);
    $site = $em->get_site();
    if($site != "")
    {

        $my_thumb= $em->get_thumb("medium");
       $code = $em->get_iframe();

        if($my_thumb != "")
        {
            echo '<div class="img_container"><a href="#" id="video_thumb_'.$omsg_id.'" style="display:block;" onClick="javascript:loadVideo(\''.$omsg_id.'\')"><img src='.$my_thumb.' class="imgpreview" /></a>';
            if($code != ""){
                echo '<div style="display:none;" id="video_'.$omsg_id.'"?autoplay="1">'.$code.'</div>';
            }
            echo '</div>';
        }
    }
}
?>

and the .js

    function loadVideo(input){
        document.getElementById("video_thumb_"+input).style.display="none";
        document.getElementById("video_"+input).style.display="block";
    }

when pressed the video doesnt start the autoplay you have to press twice to start the video

Edited by SimonIoa because: change
Member Avatar for SimonIoa

and this is the function

public function get_iframe($w = -1, $h = -1){
        $this->prepare_data("iframe");
        if($this->site != "" && $this->data["iframe"] != "")
        {

            if($w < 0 || $h < 0)
            {
                $w = (is_int($this->data["w"]) && $this->data["w"] > 0) ? $this->data["w"] : $this->default_size["w"];
                $h = (is_int($this->data["h"]) && $this->data["h"] > 0) ? $this->data["h"] : $this->default_size["h"];
            }
            $w=492;
            return '<iframe class="new" width="'.$w.'" height="'.$h.'" src="'.$this->data["iframe"].'?autoplay=0" frameborder="0" allowfullscreen></iframe>';
        }
        else
        {
            return "";
        }
    }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.