0

Как вместо картинки поставить видеофон? (Wordpress).`

 <header class="main_head main_color_bg" data-parallax="scroll" data-image-src="<?php echo get_template_directory_uri(); ?>/img/bg.jpg" data-z-index="1" data-position="bottom center">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <button class="toggle_menu">
                        <span class="sandwich">
                          <span class="sw-topper"></span>
                          <span class="sw-bottom"></span>
                          <span class="sw-footer"></span>
                        </span>
                    </button>
                    <nav class="top_menu">
                        <div class="logo_container">
                            <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="logo">
                        </div>
                        <ul>
                            <li><a href="#about" rel="m_PageScroll2id">About me</a></li>
                            <li><a href="#resume" rel="m_PageScroll2id">Resume</a></li>
                            <li><a href="#portfolio" rel="m_PageScroll2id">Portfolio</a></li>
                            <li><a href="#contacts" rel="m_PageScroll2id">Contacts</a></li>
                        </ul>
                    </nav>
                </div>

Что нужно заменить в хедере, дабы ничего лишнего не задеть.

1 ответ 1

1

Да ничего заменять не нужно, если использовать, например плагин Vide (документация), оставляем все как есть, подключаем jquery и сам плагин Vide, немного магии js и получаем:

$(function() {
  $("header").vide('http://falbar.ru/uploads/storage/demos/2014/09/OTRhMDY4Z/ocean.mp4', {
    volume: 1, // звук
    playbackRate: 1, // скорость воспроизведения
    muted: true, // отключен ли звук
    loop: true, // закцикливание
    autoplay: true, // автовоспроизведение
    position: "50% 50%" // выравнивание
  });
});
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

  <script src="http://falbar.ru/uploads/storage/demos/2014/09/OTRhMDY4Z/jquery.vide.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <header class="main_head main_color_bg" data-parallax="scroll" data-image-src="<?php echo get_template_directory_uri(); ?>/img/bg.jpg" data-z-index="1" data-position="bottom center">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <button class="toggle_menu">
            <span class="sandwich">
                          <span class="sw-topper"></span>
            <span class="sw-bottom"></span>
            <span class="sw-footer"></span>
            </span>
          </button>
          <nav class="top_menu">
            <div class="logo_container">
              <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="logo">
            </div>
            <ul>
              <li><a href="#about" rel="m_PageScroll2id">About me</a>
              </li>
              <li><a href="#resume" rel="m_PageScroll2id">Resume</a>
              </li>
              <li><a href="#portfolio" rel="m_PageScroll2id">Portfolio</a>
              </li>
              <li><a href="#contacts" rel="m_PageScroll2id">Contacts</a>
              </li>
            </ul>
          </nav>
        </div>
</body>

</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.