I have text under the video, I need the video to be included not only by clicking on it but also by clicking on the text. How to implement it? Here is the code:

css:

.video-box { width: 210px; background-color: #fff; margin: 0 20px 20px 0; border-radius: 5px; overflow: hidden; } .video-box p:hover { color: #5FA467; cursor: pointer; }

html:

 <div class="video-box"> <iframe src="https://www.youtube.com/embed/GKSRyLdjsPA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> <p>Some textSome textSome textSome textSome text</p> </div>

1 answer 1

Can be implemented via jQuery

To the text ( p ) add the class class="click"

And, clipping from the article
Теперь внимание! Нам нужно в конце ссылки добавить параметры ?rel=0&showinfo=0 - чтобы не было инфы перед запуском и чтобы не воспроизводились другие после завершения. Если вы не хотите этого добавлять, то добавьте хотя бы знак вопроса в конце, потому что иначе работать оно не будет.

 $(document).ready(function() { $(".click").click(function() { var $video = $(this).parent().find('iframe:first'), src = $video.attr('src'); $video.attr('src', src + '&autoplay=1'); console.log($video); }); }); 
 .video-box { width: 210px; background-color: #fff; margin: 0 20px 20px 0; border-radius: 5px; overflow: hidden; } .video-box p:hover { color: #5FA467; cursor: pointer; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="video-box"> <iframe src="https://www.youtube.com/embed/GKSRyLdjsPA?rel=0&showinfo=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> <p class="click">Some textSome textSome textSome textSome text</p> </div>

Jsfiddle example

  • kowtow to you! Only I have a question for you. I have a lot of these videos with text. how to do for everyone? and then he only works for one? - Timur
  • @AsasSas Corrected the answer - nicolaa
  • spfibo !!!!!!! asdasd - Timur