Colorbox - Internes Video

Hallo,

versuche gerade ein Video was per Contao eingebunden wurde in der Colorbox zu öffnen. Dies hab ich jetzt auch soweit.

PHP-Code:

---


            <div style="display:none">
                <div id="video_<?= $this->id;?>" class="ce_player">
                    <video poster="<?= $this->image;?>" preload="none" controls style="width:100%">
                        <source type="<?= $this->mime; ?>" src="<?= $this->playerSRC; ?>" title="<?= $this->title;?>">
                    </video>
                </div>    
            </div>        
            <a title="<?= $this->title;?>" href="#video_<?= $this->id;?>" data-id="<?= $this->id;?>" data-title="<?= $this->title;?>" data-content="video_<?= $this->id;?>" class="video_local">


        <script type="text/javascript">
        jQuery(document).ready(function(){
                
            $(".video_local").colorbox({
                inline: true, 
                width:"50%"
            });        
        });
        </script>

---

Allerdings sind 50% auf dem mobilen Endgeräten recht wenig und hätte es da gern so das es eben 95% der Breite und die Höhe automatisch anpasst. Die Optionen maxWidth: '95%' & maxHeight: '95%' bringen leider nicht.

Hat jemand eventuell ein Lösungsansatz oder kann die Colorbox was ohne das man große alles alle Breiten & Höhren der Colorbox + Video berechnen muss?

Heyho,

sorry fürs pushen. Aber keiner ne Idee :o

Was passiert, wenn du die Breitenangabe ganz weglässt?

Vielleicht kannst du dann bei laufendem Video mit den Browsertools nachsehen, welche Anpassungen mit normalem CSS möglich sind - dann inclusive media-queries...

Zitat:

---

Zitat von folkfreund

Was passiert, wenn du die Breitenangabe ganz weglässt?

Vielleicht kannst du dann bei laufendem Video mit den Browsertools nachsehen, welche Anpassungen mit normalem CSS möglich sind - dann inclusive media-queries...

---

Hab es jetzt so gelöst:

PHP-Code:

---

            <div style="display:none">
                <div id="video_<?= $this->id;?>" class="ce_player">
                    <video poster="<?= $this->image;?>" preload="none" controls style="width:100%">
                        <source type="<?= $this->mime; ?>" src="<?= $this->playerSRC; ?>" title="<?= $this->title;?>">
                    </video>
                </div>    
            </div>

---

Code:

---

                <script type="text/javascript">
                jQuery(document).ready(function(){
                                       
                        $(".video_local").colorbox({
                                inline: true,
                                innerWidth:640,
                                innerHeight:480,
                                maxWidth: '95%',
                                maxHeight: '95%',
                                onComplete:function(){
                                        $('#cboxTitle').hide();
                                        $(this).colorbox.resize();
                                }
                        });       

                });
               
                </script>

---

Passt, auf das resize hätte ich auch eher kommen können :D:D