Faire déborder le contenu des iframes en dehors des extensions iframe

J'ai une page web qui contient un iframe. L'intérieur que iframe est un intégré de la vidéo de Youtube. Lorsque je joue sur cette vidéo, je fais de l'échelle (grandir) dans la taille. Comme la vidéo pousse, pas tous la vidéo est visible parce que l'iframe n'est pas assez large.

Est-il possible de faire de l'iframe 'Débordement de son contenu", c'est à dire faire de la vidéo visible à l'extérieur de l'iframe width (voir ci-dessous des captures d'écran d'un exemple clair de ce que je suis en train de réaliser).

C'est comment la page web actuellement ressemble:
Faire déborder le contenu des iframes en dehors des extensions iframe

C'est comment j'aimerais faire de la vidéo lorsqu'il a pleinement cultivé:
Faire déborder le contenu des iframes en dehors des extensions iframe

Note que j'ai juste ne peux pas faire l'iframe plus large. J'ai essayé de donner l'iframe (et tous ses éléments enfants) le CSS overflow: visible mais ça ne change rien.

C'est un exemple simple de la façon dont le site est organisé:

....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>

Connaissez-vous un chemin à l'aide de CSS ou HTML pour afficher la vidéo en dehors de l'iframe extensions? Je pourrais éventuellement utiliser Javascript pour supprimer la vidéo(iframe) de l'iframe et le placer dans la page web principale, mais ce serait très mauvaise conception de site web vous ne pensez pas?

source d'informationauteur Jake M

  1. 7

    Non, il n'est pas possible...

    Le document de iframe est complètement un autre document, et de la sécurité du navigateur ne vous permettra pas de le faire...

    Modifier: vous pouvez utiliser fullscreen de la propriété à l'aide de transparents couleur d'arrière-plan du conteneur et y mettre votre vidéo intégrée.

    Le plein écran de code a été décrit dans cette réponse.

  2. 3

    [mis à jour et Édité]

    fenêtre.ouvrez fonctionne très bien pour IE ( comme dans window.open('iframe.html','','fullscreen=1,channelmode=1'); mais je veux trouver un bon moyen pour IE afin de ne pas recharger le contenu comme je l'ai fait pour les autres)
    mais je vous ai trouvé une meilleure façon qui fonctionne sur chrome, safari et FF, car ils ne prennent pas en charge le mode théâtre,

    votre iframe doit être comme :

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

    c'est le contenu de la page de votre 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>

    vous pouvez fournir qu'avec les css pour corriger les conteneurs de la hauteur et de la largeur, à l'aide de classes (addClass et removeClass) lorsque agrandie ou réduite/fermé (style ajoutés au code)

    IE compatibilité de la fonction est sur le chemin ..

    EDIT: peut-être vous devriez regarder le problème sous un autre angle si vous ne souhaitez pas utiliser windows ou en mode plein écran.

    la solution serait jeter l'iframe qui est la restriction de l'accessibilité et de la en le remplaçant par un div qui a css overflow:hiddenpuis de renseigner cette balise div avec votre iframe page du contenu (vous pouvez utiliser ajax ou de toute autre méthode pour charger le contenu). tada, vous avez quelque chose comme une iframe mais c'est un élément d'un même document. ensuite, vous pouvez contrôler le débordement de deux façons:

    1 - bascule du conteneur css entre overflow:hidden et visible ou auto.

    2 - déplacer l'élément en dehors de la div conteneur et d'utiliser le positionnement absolu pour l'afficher sur d'autres éléments.

    remarque: n'ayez pas peur de perdre de la barre de défilement, vous pouvez construire votre propre ou tout simplement le lien de votre haut css du contenu avec jquery ui valeur du slider avec absolue contenu du positionnement et vous êtes bon pour aller.

  3. 1

    L'autre sens n'est pas suggéré ici serait d'utiliser deux iframes. La deuxième serait de flotter au-dessus de la première, et permettrait de contenir de la vidéo. Vous pouvez communiquer entre windows avec window.postMessage. Mais si vous avez plus de contrôle iframe et en haut de la page alors que vous pouvez mettre la vidéo en div en haut de la page. Encore deux pages peuvent communiquer avec window.postMessage.