0

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

vlciak
  • 127
  • 1
  • 1
  • 8
  • And what if you have multiple videos on page? When you click outside, you want to change opacity on all of them? If this is the case then try this: http://jsfiddle.net/edhkavrk/ – dingo_d Nov 09 '15 at 14:12
  • See http://stackoverflow.com/questions/24688268/can-a-button-click-cause-an-event-in-iframe – guest271314 Nov 09 '15 at 14:15
  • No, I need only on one video (on one iframe) to make it happen. Unfortunately yout fiddle is not working as far as I see :/ – vlciak Nov 09 '15 at 14:20

2 Answers2

3

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.

Community
  • 1
  • 1
Arsh Singh
  • 1,580
  • 1
  • 11
  • 31
  • Could substitute `.one()` for `.on()` if `opacity` of `iframe` is not being toggled – guest271314 Nov 09 '15 at 14:18
  • @guest271314 sorry what you mean ? op asked for click i did provide click() solution. – Arsh Singh Nov 09 '15 at 14:19
  • I tried this but without success so far. What did you exactly meant "closing tag"? Closing – vlciak Nov 09 '15 at 14:21
  • @Arsh Once `opacity` is set to `1` , not necessary to call `click` handler additional times . See http://api.jquery.com/one – guest271314 Nov 09 '15 at 14:21
  • @MichalVlkovic right above :

    closing tag not

    – Arsh Singh Nov 09 '15 at 14:22
  • @guest271314 yeah i know about that , it will only works once, well let me add that as well :) . – Arsh Singh Nov 09 '15 at 14:24
  • @Arsh Pasted it above the closing

    tag under loaded other scripts but it does not work. I tried everything you posted. I have jQuery loaded from googleapis and I am testing it only localy in my computer. Couldn´t be this possible cause of problems?

     – vlciak Nov 09 '15 at 14:30
  • @MichalVlkovic check my answer's edit and copy whole code from last edit. the full html structure – Arsh Singh Nov 09 '15 at 14:31
  • @Arsh Actually `.one()` is not appropriate , as the `css` `:hover` property would continue to reset `opacity` to `0.3` – guest271314 Nov 09 '15 at 14:34
  • 1
    @guest271314 well let him first get the .click() to work. if it works for him ,,, that would be good , i even posted full html working structure – Arsh Singh Nov 09 '15 at 14:36
  • @Arsh Tried your full html structure localy, no success, uploaded to web, unfortunatelly the same. You can check here http://vlkotech.sk/uc/demo.html – vlciak Nov 09 '15 at 14:37
  • @MichalVlkovic well it is working on the link u posted :/ check this : http://prntscr.com/90svbl and which browser are you using to check this ? and btw as you asked , it's onclick you have to click somewhere to make it opacity:1; – Arsh Singh Nov 09 '15 at 14:37
  • @Arsh Yeah, actually, we got little misunderstanding. You are right, it works :) But I wanted that onclick to be the click on video when I want to play it, not somewhere else later. Is that possible? Thank you for your answers, you are really helping me! – vlciak Nov 09 '15 at 14:45
  • yeah check my edit and recopy the full html structure – Arsh Singh Nov 09 '15 at 14:47
  • @MichalVlkovic and also check the js fiddle link i have created: http://jsfiddle.net/u6h55L5b/ – Arsh Singh Nov 09 '15 at 14:50
  • @Arsh Unfortunately the last fiddle does not work for me at all. :/ We have been already there, but this one click makes the difference I think. While clicking somewhere outside the iframe it worked but now it does not. – vlciak Nov 09 '15 at 15:01
  • @MichalVlkovic try this: http://jsfiddle.net/u6h55L5b/1/ for me it's visible when i click on iframe – Arsh Singh Nov 09 '15 at 15:03
  • @Arch When I click, also is visible (opacity 1) but when I leave mouse outside of iframe it fades to 0.3 (default not on hover)...it shows me if I want to chat with you, do you have a moment? – vlciak Nov 09 '15 at 15:06
  • @Arsh I have low reputation unfortunately I cant chat :/ So please can you check the fiddle that was working and then when you were taking into account clicking inside the iframe it stopped working for me. I am testing it in latest Firefox, could it be the reason of problems? Thanks a lot for all – vlciak Nov 09 '15 at 15:10
  • @MichalVlkovic i got the problem , let me just update it and make it work for you – Arsh Singh Nov 09 '15 at 15:11
  • @MichalVlkovic check my final edit for full document now it is working on click :) and not getting faded when you are not hovering on iframe – Arsh Singh Nov 09 '15 at 15:33
  • @Arsh Thank you very much for that, now it works like a charm! :) Only one thing disappeared - hover, I tried add it but I am noob in this, is that possible even thou theres before opacity which is on top layer of everything (I suppose this from code) I tried fork this, perhaps you may look at it. Thank you for now, even this is really good :) http://jsfiddle.net/drs7sg3c/ – vlciak Nov 09 '15 at 15:55
  • if it did help , it would be good if you click accept ,, yup let me check the fiddle and help you in this :) – Arsh Singh Nov 09 '15 at 15:56
  • @MichalVlkovic check this :) . http://jsfiddle.net/drs7sg3c/1/ it's just css edit , no need of js – Arsh Singh Nov 09 '15 at 15:58
  • @MichalVlkovic sorry wait – Arsh Singh Nov 09 '15 at 16:04
  • @MichalVlkovic now it's working good : check this : http://jsfiddle.net/drs7sg3c/2/ – Arsh Singh Nov 09 '15 at 16:11
  • @Arsh Many many thanks mate, it works perfect! I have editted also my post with working fiddle with some added transitions for better look, thank you again :) – vlciak Nov 09 '15 at 18:16
  • @MichalVlkovic it would be nice of you if you accept the answer :) you haven't done it yet – Arsh Singh Nov 09 '15 at 18:44
  • @Arsh Done :) Sorry for delay – vlciak Nov 10 '15 at 19:22
0

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/

guest271314
  • 1
  • 15
  • 104
  • 177
  • Wow, this is pretty awesome :) But the same problem si here for me, as I explained to @Arsh in thread above, anyway very nice solution, thank you! – vlciak Nov 09 '15 at 14:47