iframe onclick 事件更改不透明度答案

【问题标题】：iframe onclick event change opacityiframe onclick 事件更改不透明度
【发布时间】：2015-11-10 02:09:26
【问题描述】：

编辑：非常感谢@Arsh 帮助我解决了这个问题。现在它就像一个魅力。我添加了一些 CSS 过渡以获得更好的外观，希望这个线程将来可以帮助某人:)

你可以在这里找到工作小提琴：http://jsfiddle.net/4bkzdrve/

原始问题和解决方案：

我有 iframe youtube 视频，并且已经将默认不透明度设置为 0.3 和 onhover 1.0。我希望 iframe 检测 onlick 事件，然后将不透明度设置为 1.0，即使鼠标不会在 iframe 区域上。我尝试了一切，但没有成功。这是一些标记：

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>

如果可能的话，我也想为移动设备提供解决方案，但不是必须的。非常感谢您帮助我

【问题讨论】：

如果页面上有多个视频怎么办？当您单击外部时，您想更改所有这些的不透明度？如果是这种情况，那么试试这个：jsfiddle.net/edhkavrk
见stackoverflow.com/questions/24688268/…
不，我只需要一个视频（在一个 iframe 上）就可以实现。不幸的是，据我所知，你的小提琴不起作用：/

标签： javascript jquery css iframe opacity

【解决方案1】：

这个问题的工作解决方案：http://jsfiddle.net/drs7sg3c/2/

首先记得在html document 中包含jquery source 文件在<head> </head> 中：

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

您可以在 </body> 结束标记上方使用以下 jQuery 函数来实现：

<script type="text/javascript">

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

</script>

即使您点击iframe，您也可以将不透明度设为 1：

<script type="text/javascript">

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

    </script>

我建议您打开以下网址并阅读他们对.click() 事件的看法：

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

根据guest的建议

也检查一下这个：

<script type="text/javascript">

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

        </script>

作为完整的 html 结构试试这个：

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

现在点击.video 时上面的代码会删除opacity ``(:before) 并自动播放视频。

【讨论】：

如果opacity 的iframe 没有被切换，可以用.one() 代替.on()
@guest271314 对不起，你的意思是什么？ op 要求点击我确实提供了 click() 解决方案。
我试过这个，但到目前为止没有成功。你到底是什么意思“结束标签”？关闭或整个 ?
@Arsh 一旦将opacity 设置为1，就不必再调用click 处理程序。见api.jquery.com/one
@guest271314 让他先让 .click() 工作。如果它对他有用，那会很好，我什至发布了完整的 html 工作结构

【解决方案2】：

尝试使用.toggleClass() 和附加到$(window) 的click 事件在第一次单击时将不透明度切换为1，将css 重置为初始值，包括:hover 影响，当第二次单击时；在window 上的每个click 切换前者和后者

$(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/

【讨论】：

哇，这太棒了 :) 但是我也遇到了同样的问题，正如我在上面的线程中向 @Arsh 解释的那样，无论如何都是非常好的解决方案，谢谢！