Форум на Исходниках.RU https://forum.sources.ru Форум на Исходниках.RU Форум на Исходниках.RU https://forum.sources.ru/index.php?showtopic=421045&view=findpost&p=3843132 Fri, 25 Dec 2020 09:33:01 +0000 Как поставить музыкальный плеер на блок в одностраничнике? https://forum.sources.ru/index.php?showtopic=421045&view=findpost&p=3843132
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
     
        <title>Flat - Responsive HTML Template</title>
    <!--
    Flat Template
    <a class='tag-url' href='http://www.templatemo.com/tm-491-flat' target='_blank'>http://www.templatemo.com/tm-491-flat</a>
    -->
        <!-- load stylesheets -->
        <link rel="stylesheet" href="<a class='tag-url' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400">' target='_blank'>https://fonts.googleapis.com/css?family=Ope...0,400"></a>    <!-- Google web font "Open Sans" -->    
        <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">            <!-- Font awesome -->
        <link rel="stylesheet" href="css/bootstrap.min.css">                                  <!-- Bootstrap style -->
        <link rel="stylesheet" href="css/hero-slider-style.css">                              <!-- Hero slider style (<a class='tag-url' href='https://codyhouse.co/gem/hero-slider/' target='_blank'>https://codyhouse.co/gem/hero-slider/</a>) -->
        <link rel="stylesheet" href="css/magnific-popup.css">                                 <!-- Magnific popup style (<a class='tag-url' href='http://dimsemenov.com/plugins/magnific-popup/' target='_blank'>http://dimsemenov.com/plugins/magnific-popup/</a>) -->
        
        <link rel="stylesheet" href="css/templatemo-style.css">                               <!-- Templatemo style -->
     
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="<a class='tag-url' href='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>' target='_blank'>https://oss.maxcdn.com/html5shiv/3.7.2/html...</script></a>
          <script src="<a class='tag-url' href='https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>' target='_blank'>https://oss.maxcdn.com/respond/1.4.2/respon...</script></a>
        <![endif]-->
    </head>
     
        <body>
                          
            <!-- Content -->
            <div class="cd-hero">
     
                <!-- Navigation -->        
                <div class="cd-slider-nav">
                    <nav class="navbar">
     
                        <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
                            ☰
                        </button>
                        <div class="collapse navbar-toggleable-sm text-xs-center text-uppercase tm-navbar" id="tmNavbar">
                            <ul class="nav navbar-nav">
                                <li class="nav-item active selected">
                                    <a class="nav-link" href="#0" data-no="1">Intro <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#0" data-no="2">About</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#0" data-no="3">Gallery</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#0" data-no="4">Video</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#0" data-no="5">Contact</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
     
                <ul class="cd-hero-slider">  <!-- autoplay -->
                    <li class="selected">
                        <div class="cd-full-width">
                            <div class="container-fluid js-tm-page-content tm-page-1" data-page-no="1">
                                
                                <div class="row">
                                
                                    <div class="col-xs-12">
                                        <i class="fa fa-4x fa-camera tm-icon"></i>
                                        <h2 class="tm-site-name">FLAT design</h2>
                                        <div class="tm-bg-white-translucent text-xs-left tm-textbox tm-textbox-1-col">
                                            <p class="tm-text">Flat design used <a rel="nofollow" href="<a class='tag-url' href='https://codyhouse.co/gem/hero-slider/"' target='_blank'>https://codyhouse.co/gem/hero-slider/"</a> target="_blank">Hero Slider</a> for left and right page transitions. Responsiveness is based on <a rel="nofollow" href="<a class='tag-url' href='http://getbootstrap.com/"' target='_blank'>http://getbootstrap.com/"</a> target="_blank">Bootstrap</a> 4 alpha 2. Images are taken from <a rel="nofollow" href="<a class='tag-url' href='https://unsplash.com/"' target='_blank'>https://unsplash.com/"</a> target="_blank">Unsplash</a>. This web template is provided by <a href="<a class='tag-url' href='https://plus.google.com/+templatemo"' target='_blank'>https://plus.google.com/+templatemo"</a> target="_blank">templatemo</a> for free of charge.</p>
                                            <p class="tm-text">Mauris eros lacus, sollicitudin sit amet lacinia et, vehicula bibendum felis. Pellentesque in quam iaculis erat iaculis lacinia. Donec sagittis sapien odio, a sodales velit elementum nec.</p>
                                        </div>
                                    </div>
     
                                </div>
     
                            </div>
                        </div> <!-- .cd-full-width -->
                    </li>
     
                    <li>
                        <div class="cd-full-width">
     
                            <div class="container-fluid js-tm-page-content" data-page-no="2">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="tm-2-col-container">
                                
                                            <div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox">
                                                <h2 class="tm-text-title">Lorem ipsum dolor</h2>
                                                <p class="tm-text">Quisque sagittis quam tortor, sit amet posuere justo tempor non. Cras tempus, eros vel ultrices aliquam, velit tortor sodales risus, ac facilisis lectus tortor eget neque.</p>
                                                <p class="tm-text">Nam auctor dui ante. Curabitur tristique nec ligula ac semper. Nunc eu leo sit amet elit condimentum consectetur.</p>
                                            </div>
     
                                            <div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox">
                                                <h2 class="tm-text-title">Phasellus rutrum sapien</h2>
                                                <p class="tm-text">
                                                Donec sagittis sapien odio, a sodales velit elementum nec. Donec feugiat purus a bibendum hendrerit.</p>
                                                <p class="tm-text">Fusce ut elit interdum sem consectetur maximus. Mauris eros lacus, sollicitudin sit amet lacinia et, vehicula bibendum felis. Pellentesque in quam iaculis erat iaculis lacinia.</p>
                                            </div>
     
                                        </div>
                                    </div>
                                </div>
                            </div>
                                                    
                        </div> <!-- .cd-full-width -->
     
                    </li>
                    
                    <!-- Page 3 -->
                    <li>
                        
                        <div class="cd-full-width">
     
                            <div class="container-fluid js-tm-page-content" data-page-no="3">
                                
                                <div class="row tm-img-gallery">
                                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
                                        <a href="img/tm-img-01.jpg">
                                            <img src="img/tm-img-01-tn.jpg" alt="Image" class="img-fluid tm-img">
                                        </a>
                                    </div>
                                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
                                        <a href="img/tm-img-02.jpg">
                                            <img src="img/tm-img-02-tn.jpg" alt="Image" class="img-fluid tm-img">
                                        </a>
                                    </div>
                                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
                                        <a href="img/tm-img-03.jpg">
                                            <img src="img/tm-img-03-tn.jpg" alt="Image" class="img-fluid tm-img">
                                        </a>
                                    </div>
                                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
                                        <a href="img/tm-img-04.jpg">
                                            <img src="img/tm-img-04-tn.jpg" alt="Image" class="img-fluid tm-img">
                                        </a>
                                    </div>
                                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
                                        <a href="img/tm-img-05.jpg">
                                            <img src="img/tm-img-05-tn.jpg" alt="Image" class="img-fluid tm-img">
                                        </a>
                                    </div>
                                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
                                        <a href="img/tm-img-06.jpg">
                                            <img src="img/tm-img-06-tn.jpg" alt="Image" class="img-fluid tm-img">
                                        </a>
                                    </div>                                
                                </div>
     
                            </div>
                                                        
                        </div>
                        
                    </li>
     
                    <li>  <!-- class="cd-bg-video" -->
                        <div class="js-tm-page-content" data-page-no="4">
                            
                            <div class="cd-bg-video-wrapper" data-video="video/sunset-loop">
                                <!-- video element will be loaded using jQuery -->
                            </div> <!-- .cd-bg-video-wrapper -->
     
                        </div>                    
     
                    </li>
     
                    <li>
                        <div class="cd-full-width">
     
                            <div class="container-fluid js-tm-page-content" data-page-no="5">
                                
                                <div class="tm-contact-page">
                                    
                                    <div class="row">
     
                                        <div class="col-xs-12">
                                            
                                            <h2 class="tm-section-title">Contact Us</h2>
                                            <p class="tm-text tm-font-w-400 m-b-3">Pellentesque in quam iaculis erat iaculis lacinia. Donec sagittis sapien odio, a sodales velit elementum nec. Donec feugiat purus a bibendum hendreit.</p>      
     
                                        </div>
     
                                    </div>
     
                                    <!-- contact form -->
                                    <div class="row">
                                        <form action="index.html" method="post" class="tm-contact-form">
                                        
                                            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                                <div class="form-group">
                                                    <input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Your Name"  required/>
                                                </div>
                                                <div class="form-group">
                                                    <input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="Your Email"  required/>
                                                </div>
                                                <div class="form-group">
                                                    <input type="text" id="contact_subject" name="contact_subject" class="form-control" placeholder="Subject"  required/>
                                                </div>    
                                            </div>
     
                                            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                                <div class="form-group">
                                                    <textarea id="contact_message" name="contact_message" class="form-control" rows="5" placeholder="Your message" required></textarea>
                                                </div>    
                                            </div>
     
                                            <div class="col-xs-12">
                                                <button type="submit" class="pull-xs-right tm-submit-btn">Submit</button>
                                            </div>
                                        </form>  
                                    </div>
     
                                </div>    
     
                            </div>
                            
                        </div> <!-- .cd-full-width -->
                    </li>
                </ul> <!-- .cd-hero-slider -->
                
                <footer class="tm-footer">
                
                    <div class="tm-social-icons-container">
                        <a href="#" class="tm-social-link"><i class="fa fa-facebook"></i></a>
                        <a href="#" class="tm-social-link"><i class="fa fa-google-plus"></i></a>
                        <a href="#" class="tm-social-link"><i class="fa fa-twitter"></i></a>
                        <a href="#" class="tm-social-link"><i class="fa fa-behance"></i></a>
                        <a href="#" class="tm-social-link"><i class="fa fa-linkedin"></i></a>
                    </div>
                    
                    <p class="tm-copyright-text">Copyright © 2016 Your Company - Design: <a href="<a class='tag-url' href='https://plus.google.com/+templatemo"' target='_blank'>https://plus.google.com/+templatemo"</a> target="_blank">Templatemo</a></p>
     
                </footer>
                        
            </div> <!-- .cd-hero -->
            
     
            <!-- Preloader, <a class='tag-url' href='https://ihatetomatoes.net/create-custom-preloading-screen/' target='_blank'>https://ihatetomatoes.net/create-custom-preloading-screen/</a> -->
            <div id="loader-wrapper">
                
                <div id="loader"></div>
                <div class="loader-section section-left"></div>
                <div class="loader-section section-right"></div>
     
            </div>
            
            <!-- load JS files -->
            <script src="js/jquery-1.11.3.min.js"></script>         <!-- jQuery (<a class='tag-url' href='https://jquery.com/download/' target='_blank'>https://jquery.com/download/</a>) -->
            <script src="<a class='tag-url' href='https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>' target='_blank'>https://www.atlasestateagents.co.uk/javascr...</script></a> <!-- Tether for Bootstrap (<a class='tag-url' href='http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h' target='_blank'>http://stackoverflow.com/questions/3456793...r-http-github-h</a>) -->
            <script src="js/bootstrap.min.js"></script>             <!-- Bootstrap js (v4-alpha.getbootstrap.com/) -->
            <script src="js/hero-slider-main.js"></script>          <!-- Hero slider (<a class='tag-url' href='https://codyhouse.co/gem/hero-slider/' target='_blank'>https://codyhouse.co/gem/hero-slider/</a>) -->
            <script src="js/jquery.magnific-popup.min.js"></script> <!-- Magnific popup (<a class='tag-url' href='http://dimsemenov.com/plugins/magnific-popup/' target='_blank'>http://dimsemenov.com/plugins/magnific-popup/</a>) -->
            
            <script>
     
                function adjustHeightOfPage(pageNo) {
                  
                    // Get the page height
                    var totalPageHeight = 15 + $('.cd-slider-nav').height()
                                            + $(".cd-hero-slider li:nth-of-type(" + pageNo + ") .js-tm-page-content").height() + 160
                                            + $('.tm-footer').height();
     
                    // Adjust layout based on page height and window height
                    if(totalPageHeight > $(window).height())
                    {
                        $('.cd-hero-slider').addClass('small-screen');
                        $('.cd-hero-slider li:nth-of-type(' + pageNo + ')').css("min-height", totalPageHeight + "px");
                    }
                    else
                    {
                        $('.cd-hero-slider').removeClass('small-screen');
                        $('.cd-hero-slider li:nth-of-type(' + pageNo + ')').css("min-height", "100%");
                    }
     
                }
     
                /*
                    Everything is loaded including images.
                */
                $(window).load(function(){
     
                    adjustHeightOfPage(1); // Adjust page height
     
                    /* Gallery pop up
                    -----------------------------------------*/
                    $('.tm-img-gallery').magnificPopup({
                        delegate: 'a', // child items selector, by clicking on it popup will open
                        type: 'image',
                        gallery:{enabled:true}                
                    });
     
                    /* Collapse menu after click
                    -----------------------------------------*/
                    $('#tmNavbar a').click(function(){
                        $('#tmNavbar').collapse('hide');
     
                        adjustHeightOfPage($(this).data("no")); // Adjust page height      
                    });
     
                    /* Browser resized
                    -----------------------------------------*/
                    $( window ).resize(function() {
                        var currentPageNo = $(".cd-hero-slider li.selected .js-tm-page-content").data("page-no");
                        adjustHeightOfPage( currentPageNo );
                    });
            
                    // Remove preloader
                    // <a class='tag-url' href='https://ihatetomatoes.net/create-custom-preloading-screen/' target='_blank'>https://ihatetomatoes.net/create-custom-preloading-screen/</a>
                    $('body').addClass('loaded');
                              
                });
     
            </script>            
     
    </body>
    </html>


Плеер: http://zornet.ru/load/audio_pleer_s_plejli...ml5/81-2-0-7883
Сайт: https://templatemo.com/tm-491-flat

У меня не получается, плеер встает как на приложенной картинке.
Clipboard76767.jpg (, : 528) ]]> Serj12 HTML, CSS