HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="ct-videoPoster text-right animated" data-fx="fadeInRight"> <div class="ct-videoPoster-content"> <img src="../assets/images/demo-content/video-frame.png" alt="Image"/> <div class="ct-videoPoster-frame"> <img src="../assets/images/demo-content/video-poster.jpg" alt="Image"/> <a href="https://www.youtube.com/watch?v=rYbtBXhMFAQ" class="ct-js-videoPlay"><img src="../assets/images/demo-content/video-play.png" alt="Image"/></a> </div> </div> <div class="ct-videoPoster--mobile ct-u-paddingBottom70 ct-u-paddingTop20"> <div class="ct-videoPoster-frame"> <img src="../assets/images/demo-content/video-poster.jpg" alt="Image"/> <a href="https://www.youtube.com/watch?v=rYbtBXhMFAQ" class="ct-js-videoPlay"><img src="../assets/images/demo-content/video-play.png" alt="Image"/></a> </div> </div> </div> |
JavaScript
<script src=”../assets/js/magnificpopup/magnificpopup.min.js”></script><script src=”../assets/js/magnificpopup/init.js”></script>
Screenshot
Video poster