All geek questions in one place

Chrome does not display iframe and / or transition correctly

I have a small project that works fine in safari and firefox, but not in chrome. This is one of my first projects developing for the network, so it’s still very fresh. I made a couple of gifs that will save me a lot of explanation.

This works correctly in safari:

enter image description here

But this is what happens in chrome:

enter image description here

, . , iframe chrome, , , . , , , css ? , , , , , . .

, . , iframe, . , . , , iframe .

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test for S.O.</title>
    <link rel="stylesheet" type="text/css" href="forStack.css">
</head>
<body> 
<div id="container">

<div id="backgroundLeft"><img id='backgroundLeftImage' src="image1.jpg" width="100%" height="100%"></div>

<div id="wrap">

<p>Lorem ipsum dolor sit amet, ut eos alterum perpetua reformidans, odio possim in qui, et nam ferri disputationi. Pro an eius legimus volutpat, ius facilisi gubergren ei, modus inimicus ut his. Pro ei eirmod quaerendum, cu quo epicuri lucilius euripidis. Nam facer simul ut, aeterno persecuti ea vix, ius at alienum officiis perfecto.   
Dicta senserit dissentiunt quo ea. Ne possim lobortis percipitur his. Viderer appetere ea quo, has ne causae probatus, eum ea dissentiunt philosophia. Menandri imperdiet dissentiet per ad. Ea cibo tollit ius, mel id mundi vituperata.<span id="linkID" class="link"> click me </span>.<span><iframe id="frame" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>   
</span> Lorem ipsum dolor sit amet, ut eos alterum perpetua reformidans, odio possim in qui, et nam ferri disputationi. Pro an eius legimus volutpat, ius facilisi gubergren ei, modus inimicus ut his. Pro ei eirmod quaerendum, cu quo epicuri lucilius euripidis. Nam facer simul ut, aeterno persecuti ea vix, ius at alienum officiis perfecto.
Dicta senserit dissentiunt quo ea. Ne possim lobortis percipitur his. 
Viderer appetere ea quo, has ne causae probatus, eum ea dissentiunt philosophia. Menandri imperdiet dissentiet per ad. Ea cibo tollit ius, mel id mundi vituperata.
    </p>
   </div>
 <div id="backgroundRight"><img id='backgroundRightImage' src="image2.jpg" width="100%" height="100%"></div>

    <script type="text/javascript" src="jquery.js"></script>
    <script src="scriptStack.js"></script>
</body>
</html>

CSS

html, body {
    min-height: 100;
    margin: 0px;
}

p span iframe {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

}

#backgroundLeft{
    position: fixed;
    float: left;
    width: 30%;
    min-height: 100%;
    overflow: hidden;
}

#backgroundLeftImage {
    position: absolute;
}

#backgroundRightImage{
    position: absolute;
}

#wrap{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    margin: 100px auto;
    width: 20%;
}

#backgroundRight{
    position: fixed;
    left: 70%;
    width: 30%;
    min-height: 100%;
    overflow: hidden;
}

p{
    line-height: 2em;
    vertical-align: top;
    position: relative;
}

.videos {width: 100%;}

.link {
    color: #d6820e;
    cursor: pointer;
}

.link:hover {
    color: #d6460e;
}

iframe {
    border:0 none;
}

.rect{
    float: left;
    height: 0px;
    width: 100%;    
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
    width: 100%;
    opacity: 1;
    display: inline-block;
}

JS

$(document).ready(function(){

        var player;
        var frame = $("#frame");

        frame.bind("load", function () {
            player = $(this).contents().find("#testVid");
            player.on('ended', function () {
                frame.removeClass("open");
            });
        });

        $("#linkID").click(function(){

                if (frame.hasClass("open")) {   

                    frame.removeClass("open");
                    frame.contents().find('#testVid').get(0).pause();

                } else {

                    frame.attr("src","iframe.html");
                    document.getElementById('frame').onload = function() {
                        frame.addClass("open");
                        frame.contents().find('#testVid').get(0).play();
                    }
                }   
        });   
});

iframe.html

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript" src="script2.js"></script>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>


    <video id="testVid" width="100%">
        <source src="mickey.mp4" type="video/mp4">
    </video>



</body>
</html>

----------------------------------------------- ------------------------------------------------- -----------------------------

"left" ".rect" : inline , :

enter image description here

, , !

+4
3

, , , display: block; display: inline-block; .

float .rect, display .open , , , - .

.rect{
    height: 0px;
    width: 100%;
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
    width: 100%;
    opacity: 1;
}
+4

, position , , , float , position css,

: ,

$(document).ready(function(){
	$("#linkID").click(function(){
		$(".rect").toggleClass("open");	
	});
	
});
html, body {
    min-height: 100;
    margin: 0px;
}

p span iframe {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

}

#backgroundLeft{
    position: fixed;
    float: left;
    width: 30%;
    min-height: 100%;
    overflow: hidden;
}

#backgroundLeftImage {
    position: absolute;
}

#backgroundRightImage{
    position: absolute;
}

#wrap{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    margin: 100px auto;
    width: 20%;
}

#backgroundRight{
    position: fixed;
    left: 70%;
    width: 30%;
    min-height: 100%;
    overflow: hidden;
}

p{
    line-height: 2em;
    vertical-align: top;
    position: relative;
}

.videos {width: 100%;}

.link {
    color: #d6820e;
    cursor: pointer;
}

.link:hover {
    color: #d6460e;
}

iframe {
    border:0 none;
}

.rect{
    height: 0px;
    width: 100%;    
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
    width: 100%;
    opacity: 1;
    display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="container">

<div id="backgroundLeft"><img id='backgroundLeftImage' src="image1.jpg" width="100%" height="100%"></div>

<div id="wrap">

<p>Lorem ipsum dolor sit amet, ut eos alterum perpetua reformidans, odio possim in qui, et nam ferri disputationi. Pro an eius legimus volutpat, ius facilisi gubergren ei, modus inimicus ut his. Pro ei eirmod quaerendum, cu quo epicuri lucilius euripidis. Nam facer simul ut, aeterno persecuti ea vix, ius at alienum officiis perfecto.   
Dicta senserit dissentiunt quo ea. Ne possim lobortis percipitur his. Viderer appetere ea quo, has ne causae probatus, eum ea dissentiunt philosophia. Menandri imperdiet dissentiet per ad. Ea cibo tollit ius, mel id mundi vituperata.<span id="linkID" class="link"> click me </span>.<span><iframe id="frame" class="rect" scrolling="no" marginwidth=0 marginheight=0 src="http://ak1.picdn.net/shutterstock/videos/6530561/preview/stock-footage-seven-little-kids-sit-at-red-table-with-cake-and-throw-confetti-at-birthday-party-inscription-happy.mp4"></iframe>   
</span> Lorem ipsum dolor sit amet, ut eos alterum perpetua reformidans, odio possim in qui, et nam ferri disputationi. Pro an eius legimus volutpat, ius facilisi gubergren ei, modus inimicus ut his. Pro ei eirmod quaerendum, cu quo epicuri lucilius euripidis. Nam facer simul ut, aeterno persecuti ea vix, ius at alienum officiis perfecto.
Dicta senserit dissentiunt quo ea. Ne possim lobortis percipitur his. 
Viderer appetere ea quo, has ne causae probatus, eum ea dissentiunt philosophia. Menandri imperdiet dissentiet per ad. Ea cibo tollit ius, mel id mundi vituperata.
    </p>
   </div>
 <div id="backgroundRight"><img id='backgroundRightImage' src="image2.jpg" width="100%" height="100%"></div>

    <script type="text/javascript" src="jquery.js"></script>
    <script src="js.js"></script>
Hide result
+2

, iframe . , , , inline-block block. float, , , .

.rect {
  display: inline-block;
}
0

Source: https://habr.com/ru/post/1660352/

More articles:


All Articles