1. дома
  2. Вопрос и ответ
  3. iframe onclick изменение события непрозрачность

iframe onclick изменение события непрозрачность

2015-11-09 7 views
0

EDIT: Бесконечное спасибо @Arsh, помогая мне разобраться в этом. Теперь это работает как шарм. Я addded некоторые CSS переходы для лучшего взгляда, надеюсь, эта нить поможет кому-то в будущем :)iframe onclick изменение события непрозрачность

Working скрипку вы можете найти здесь: http://jsfiddle.net/4bkzdrve/

Оригинальный вопрос и решения:

У меня есть IFrame Youtube видео и уже установили непрозрачность по умолчанию 0.3 и onhover 1.0. Я хочу, чтобы iframe обнаружил событие onlick, а затем установите opacity в 1.0, даже если мышь не будет в области iframe. Я пробовал все, но безуспешно. Here's некоторую разметку:

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>

Если возможно, я хотел бы иметь решение и для мобильных устройств, но не обязательно. Спасибо вперед за помощь мне

источник

2015-11-09 Michal Vlkovic

+0

А что, если у вас есть несколько видео на странице? Когда вы нажимаете на улицу, вы хотите изменить непрозрачность на всех из них? Если это так, попробуйте это: http://jsfiddle.net/edhkavrk/ –

+0

См. Http://stackoverflow.com/questions/24688268/can-a-button-click-cause-an-event-in-iframe – guest271314

+0

Нет, мне нужно только на одном видео (на одном iframe), чтобы это произошло. К сожалению, скрипт не работает, насколько я вижу:/ –

ответ

3

Рабочего решения для этого вопроса: http://jsfiddle.net/drs7sg3c/2/

первого забудьте включить jquery source файл внутри вашего html document внутри <head> </head>:

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

Вы можете использовать ниже JQuery функции права над закрывающей биркой </body>, чтобы сделать это возможным:

<script type="text/javascript"> 

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

</script>

и вы также можете сделать непрозрачность 1, даже если нажать на iframe:

<script type="text/javascript"> 

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

    </script>

я бы рекомендовал вам открыть следующий URL и читать то, что они должны сказать о .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) и автоматически воспроизводит видео.

источник

2015-11-09 14:13:02

+0

Может ли подставить '.one()' для '.on()', если 'opacity'' iframe' не переключается – guest271314

+0

@ guest271314 извините, что вы имеете в виду? op запросил клик, я действительно предоставил решение click(). –

+0

Я пробовал это, но безуспешно. Что вы имели в виду «закрывающий тег»? Закрытие