I want to dynamically generate video player container divs that will have a unique id. The elements are generated through Visual Composer in WordPress and the final html should look something like this:

<div style="width: 100%; display: inline-block; position: relative;">
<div style="margin-top: '. $custom_margin .'"></div>
<div id="player_1" style="position:absolute;top:0;left:0;right:0;bottom:0"></div>
    </div> 
<div style="width: 100%; display: inline-block; position: relative;">
<div style="margin-top: '. $custom_margin .'"></div>
<div id="player_2" style="position:absolute;top:0;left:0;right:0;bottom:0"></div>
    </div>
<div style="width: 100%; display: inline-block; position: relative;">
<div style="margin-top: '. $custom_margin .'"></div>
<div id="player_3" style="position:absolute;top:0;left:0;right:0;bottom:0"></div>
</div>

The user should be able to add as many div elements with unique ids as he likes. This is how my php looks right now:

public function vc_custvideo_html($atts){

        extract(
            shortcode_atts(
                array(
                    'custom_width' => '',
                    'custom_height' => '',
                    ),
                    $atts
                )
            );
        $percent = $custom_height / $custom_width;
        $custom_margin = number_format( $percent * 100, 2 ) . '%';
        $html = '';
        $html.= '<div style="width: 100%; display: inline-block; position: relative;">';
        $html.= '<div style="margin-top: '. $custom_margin .'"></div>';
        $html.= '<div id="player_"  style="position:absolute;top:0;left:0;right:0;bottom:0"></div>';
        $html.= '</div>';
        return $html;
    }

I can understand that i have to use a foreach loop to generate the unique ids but i’m really new at php and I need help.

Read more here: increment id for dynamically generated div


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: