Crea overflow iframe all'esterno estensioni iframe

Ho una pagina web che contiene un iframe. Dentro che iframe è un video Youtube incorporato. Quando suono questo video, lo faccio scalare (crescere) in dimensioni. Man mano che il video cresce, non tutto il video è visibile perché l'iframe non è abbastanza ampio.Crea overflow iframe all'esterno estensioni iframe

È possibile rendere l'iframe "Overflow del suo contenuto", ovvero rendere il video visibile al di fuori della larghezza dell'iframe (vedere sotto le schermate di cattura per un chiaro esempio di ciò che sto cercando di ottenere).

Questo è come la pagina web attualmente appare: enter image description here

Questo è come mi piacerebbe fare l'aspetto video quando è completamente sviluppato: enter image description here

Nota ho appena cant fare l'iframe più ampio. Ho provato a dare l'iframe (e tutti i suoi elementi figlio) al CSS overflow: visible ma non cambia nulla.

Questo è un semplice esempio di come la pagina web è organizzato:

....head, opening html tag, etc. up here 
<body> 
    <div id="outerContainer" style="overflow: visible"> 
    <div id="navBar">...</div> 
    <div id="content style="overflow: visible"> 
     <iframe src="myHelpDocumentation.html" style="overflow: visible"> 

      <!-- Inside this iframe/webpage are the embedded Youtube videos. 
       Each video is an iframe itself (that sits inside a div). --> 

     </iframe> 
    </div> 
    </div> 
</body>

Sei a conoscenza di un modo usare i CSS o HTML per mostrare il video al di fuori delle estensioni iframe? Potrei potenzialmente usare Javascript per rimuovere il video (iframe) dall'iframe e posizionarlo nella pagina web principale, ma questo sarebbe un pessimo design del sito web non pensi?

fonte

2013-07-02 Jake M

Utilizzare una nuova finestra e aggiungere il video a esso, quindi ingrandirlo .. perché non è possibile eseguire il overflow del contenuto da un frame senza altro contenitore – CME64

@ CME64 Grazie per il commento. Quando dici una nuova finestra, intendi nuova finestra popup, nuovo documento, crea un div e lo aggiungi alla fine del documento principale, che cosa esattamente? –

window.open() .. controllare questo per riferimento http://www.w3schools.com/jsref/met_win_open.asp – CME64

[aggiornato e modificato]

window.open funziona bene per IE (come in window.open('iframe.html','','fullscreen=1,channelmode=1'); ma voglio trovare un modo adeguato per IE in modo che esso non ricaricare il contenuto come ho fatto per gli altri) ma ho trovato un modo migliore che funziona su Chrome, Safari e FF poiché non supportano la modalità teatro,

tua iframe dovrebbe essere come:

<iframe src="iframe.html" allowFullScreen></iframe>

Questa è la pagina di contenuto del iframe:

<html> 
<head> 
<title></title> 
<style type="text/css"> 
.fullScreen{ 
    width:100%; 
    height:100%; 
} 
.minScreen{ 
    width:auto; 
    height: auto; 
} 
</style> 
<script type="text/javascript" src="jquery-1.10.0.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
     var element = document.getElementById('container'); 
     var maxed = false; 
     $('#max').click(function(){ 
      if(maxed){ 
       if (document.mozCancelFullScreen) { 
        document.mozCancelFullScreen(); 
        element.className = "minScreen"; 
        maxed = false; 
       } else if (document.webkitCancelFullScreen) { 
        document.webkitCancelFullScreen(); 
        element.className = "minScreen"; 
        maxed = false; 
       } 
      }else{ 
       if (element.mozRequestFullScreen) { 
        element.mozRequestFullScreen(); 
        element.className = "fullScreen"; 
        maxed = true; 
       } else if (element.webkitRequestFullScreen) { 
        element.webkitRequestFullScreen(); 
        element.className = "fullScreen"; 
        maxed = true; 
       } 
      } 
     }); 
    }); 
</script> 
</head> 
<body> 
<div id="container"> 
    <button id="max">click to maximize/minimize</button> 
</div> 
</body> 
</html>

puoi fornire che con i CSS per correggere l'altezza contenitori e la larghezza, utilizzando le classi (addClass e removeClass) quando massimizzato o minimizzato/chiuso (stile aggiunto al codice)

funzione compatibilità

IE è sulla strada ..

EDIT: forse si dovrebbe guardare il problema fr om un altro angolo se non si desidera utilizzare Windows o schermo intero.

la soluzione sarebbe scartando l'iframe che limita l'accessibilità e la sua sostituzione con un div che ha css overflow:hidden e quindi popolare questo div con il contenuto della tua pagina iframe (è possibile utilizzare Ajax o qualsiasi altro metodo di caricare il contenuto). tada, hai qualcosa come un iframe ma è un elemento dello stesso documento.quindi, è possibile controllare l'overflow in due modi:

1- commutare il css del container tra overflow:hidden e visible o auto.

2- riposizionare l'elemento all'esterno del contenitore div e utilizzare il posizionamento assoluto per visualizzarlo su altri elementi.

nota: non abbiate paura di perdere la barra di scorrimento, si può costruire il proprio o semplicemente collegare il tuo superiore css dei contenuti con il valore del dispositivo di scorrimento ui jquery con posizionamento assoluta di contenuti e vi sono buone per partire.

fonte

2013-07-02 06:33:44 CME64

grazie per il codice. Ma non è più semplice aggiungere il video 'div' al documento esterno? Ie, '$ (" # myVideo "). Append ($ (" # myOuterDocument "). Body) .css (" position "," absolute "). Css (" top "," 150px ");'. Questa è stata la mia soluzione alternativa, ma sono preoccupato per le sue non buone pratiche di sviluppo del sito Web - rimozione di div da iframe e inserimento in altre pagine web. –

sì, questo può essere l'unico modo se non si utilizza lo schermo intero o la finestra, ci ho pensato, ma poi ho pensato a come selezionare l'elemento dall'iframe dato che è un documento diverso che lo contiene. Non ho provato quella teoria ma qui mi stai dicendo tutto. – CME64

controllare la parte di modifica, c'è un altro suggerimento – CME64

No, non è possibile ...

Il documento da iframe è completamente un altro documento, e la sicurezza del browser non ti consente di fare questo ...

Edit: puoi usare la proprietà fullscreen usando il colore di sfondo trasparente per il contenitore e inserire il tuo video incorporato.

Il codice a schermo intero è stato descritto in this answer.

fonte

2013-07-02 08:27:16

è possibile, si prega di controllare il mio codice prima di dire che, ero convinto era impossibile un'ora fa! – CME64

@ CME64 Fondamentalmente si usa la proprietà 'fullscreen', non cosa OP chiede. –

beh, hai ragione, ma la soluzione a schermo intero è quello che dovrebbe prendere in considerazione, altrimenti è una nuova finestra e lui non lo vuole di certo perché era il mio primo suggerimento.se il suo problema era che il video è più piccolo del frame, dovrebbe prendere in considerazione il ridimensionamento delle dimensioni del contenitore video. – CME64

L'altro modo non suggerito qui sarebbe quello di utilizzare due iframe. Il secondo galleggia sopra il primo e conterrebbe il video. È possibile comunicare tra le finestre con window.postMessage. Ma se hai il controllo su iframe e la pagina principale, puoi inserire il video nella pagina iniziale in div. Ancora entrambe le pagine possono comunicare con window.postMessage.

fonte

2015-11-10 21:10:43 gertas

Crea overflow iframe all'esterno estensioni iframe

risposta

Problemi correlati