CODEWITHSUNDEEP
javascriptjquerycssiframeopacity
vlciak
vlciak

Reputation: 125

iframe onclick event change opacity

EDIT: Endless thanks to @Arsh with helping me to figure it out. Now it works like a charm. I addded some CSS transitions for better look, hope this thread will help someone in future :)

Working fiddle you can find here: http://jsfiddle.net/4bkzdrve/

Original question and resolving:

I have iframe youtube video and already have set default opacity to 0.3 and onhover 1.0. I want iframe detect onlick event and then set opacity to 1.0 even if mouse won´t be on iframe area. I tried everything but without success. Here´s some markup:

CSS:

iframe.video{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
transition:all 1s linear; 
-o-transition:all 1s linear; 
-moz-transition:all 1s linear; 
-webkit-transition:all 1s linear;} 

iframe.video:hover{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;}

HTML: 

<iframe class="video" width="500" height="300" src="https://www.youtube.com/embed/YjWIAOsndu4" frameborder="0" allowfullscreen></iframe>

If possible, I would like to have solution also for mobile devices, but not necessary. Thank you in forward for helping me out

Upvotes: 0

Views: 1592

Answers (2)

Arsh Multani
Arsh Multani

Reputation: 1591

Working solution for this question: http://jsfiddle.net/drs7sg3c/2/

first remember to include jquery source file inside your html document inside <head> </head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

You can use the below jQuery function right above the </body> closing tag to make it possible:

<script type="text/javascript">

    $(document).ready(function(){
        $(document).on('click',function(){
           $('iframe').css('opacity','1');
        });
    });

</script>

and you can also make opacity 1 even if you click on iframe :

<script type="text/javascript">

        $(document).ready(function(){
            $('iframe').on('click',function(){
               $(this).css('opacity','1');
            });
        });

    </script>

i would recommend you to open the following url and read what they have to say about .click() event:

https://api.jquery.com/click/

as per suggested by guest

check this one as well :

<script type="text/javascript">

            $(document).ready(function(){
                $('iframe').one('click',function(){
                   $(this).css('opacity','1');
                });
            });

        </script>

as full html structure try this :

    <!doctype html>
<html>
    <head>
        <title>My iframe</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <style>
            .video{
            transition:all 1s linear; 
            -o-transition:all 1s linear; 
            -moz-transition:all 1s linear; 
            -webkit-transition:all 1s linear;
float:left;
position:relative;

} 
.video.opacity:hover:before{
  background:rgba('255,255,255,0');
 }
     .video.opacity:before{
     content:"";
        background:rgba(255,255,255,0.8);
        width:100%;
        height:100%;
        left:0;
        top:0;
        position:absolute;
        z-index:1;
    }
            </style>    
</head>
<body>
 <div class="video opacity">
<iframe width="500" height="300" src="https://www.youtube.com/embed/YjWIAOsndu4?wmode=transparent" frameborder="0" allowfullscreen></iframe>
</div>
<script type="text/javascript">
jQuery('.video').click(function(){
   $(this).removeClass('opacity');
    $(this).find('iframe')[0].src += "&autoplay=1";
    ev.preventDefault();

  });
</script>
</body>
</html>

Now above code on click of .video removes opacity ``(:before) and plays the video automatically.

Upvotes: 3

guest271314
guest271314

Reputation: 1

Try using .toggleClass() with click event attached to $(window) to toggle opacity to 1 when clicked first time, reset css to initial , including :hover affect , when clicked second time ; toggling former and latter at each click on window

$(function () {
    var url = "https://www.youtube.com/embed/YjWIAOsndu4";
    var iframe = $("<iframe>", {
            "src": url,
            "class": "video",
            "width": "500px",
            "height": "300px",
            "frameborder": "0",
            "allowfullscreen": true
    });
    $.when($("body").append(iframe))
    .then(function (b) {
        $(window).on("click", function (e) {
            $(b).find(iframe).toggleClass("video")
        });
    });
})

jsfiddle http://jsfiddle.net/2x4xz/9/

Upvotes: 0

Related Questions