| Cheshirka |
14.12.2017 00:24 |
Пуск/пауза видео в youtube
Создала отдельную кнопку для управлением видео. При нажатии кнопки видео должно останавливаться и меняться значок на кнопке, при повторном нажатии продолжение видео с того же момента и снова смена значка. В моем варианте работает только 1 часть. Подскажите пожалуйста, что нужно исправить, чтобы корректно заработало.
Код:
<?php
/*
Template Name: Пример страниц
*/
?>
<!DOCTYPE html>
<html lang="ru">
<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>PRF</title>
<!-- Bootstrap -->
<link href="<?php bloginfo('template_url'); ?>/css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/owl.carousel.css"> -->
<link href="<?php bloginfo('template_url'); ?>/style.css" rel="stylesheet">
<link href="<?php bloginfo('template_url'); ?>/responsive.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="page-video">
<section class="content-my">
<div class=" container-video-my">
<div class="row">
<div class="col-md-2 logo-my">
<a href="<?php echo home_url( '/' ); ?>"><img class="logo" src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="" /></a>
</div>
<div class="col-md-7">
<div class="video-block">
<div class="video-text video-text-my">
<h1>Получить банковскую гарантию </h1>
<span>за 48 часов <br>по всей России</span>
</div>
<div id="play">
<!-- 560 315 / 854 480-->
<iframe width="500" height="426" id="Video5" class="background-video-my"
src="https://www.youtube.com/embed/JHz3pPoHDl4?rel=0&showinfo=0&controls=2&start=2&autoplay=1&modestbranding=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-top-my form-top" id="form-top">
<span class="form-top-title">Заявка на получение банковской гарантии</span>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php echo do_shortcode( '[contact-form-7 id="38" title="Заявка"]' ); ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<i class="svg-icon"></i>
</div>
</div>
</div>
</div>
</section>
<footer class="my-footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="footer-list-1">
<li>
<span class="title-zn"><?php the_field('заголовок_номера_подвал', option); ?></span>
<span class="phone-zn"><?php the_field('номер_телефона_подвал', option); ?></span>
</li>
<li>
<!-- <a href="#" class="zak-zn">Заказать звонок на Ваш номер</a> -->
<a href="#contact_form_pop" class="zak-zn fancybox">Заказать звонок на Ваш номер</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop">
<?php echo do_shortcode( '[contact-form-7 id="208" title="Заказ звонка"]' ); ?>
</div>
</div>
</li>
<li>
<?php the_field('почта_подвал', option); ?>
</li>
<li>
<a href="<?php echo get_permalink(31); ?>#contacts" class="footer-adress"><?php the_field('адрес_подвал', option); ?></a>
</li>
</ul>
</div>
</div>
</div>
<hr />
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<?php wp_nav_menu( array( 'theme_location' => 'primary1','fallback_cb'=> '', 'items_wrap' => '<ul class="footer-list-2">%3$s</ul>', 'container' => '') ); ?>
</div>
</div>
</div>
<hr />
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<ul class="footer-list-3">
<?php while(has_sub_field('соц_сети', option)) { ?>
<li><a href="<?php the_sub_field('ссыдка'); ?>"><img src="<?php the_sub_field('иконка'); ?>" alt="" /></a></li>
<?php } ?>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<?php the_field('копирайты', option); ?>
</div>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="<?php bloginfo('template_url'); ?>/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?php bloginfo('template_url'); ?>/js/bootstrap.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.matchHeight.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.maskedinput.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/owl.carousel.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/script.js"></script>
<script src="//www.youtube.com/player_api"></script>
<script type="text/javascript">
function onYouTubePlayerAPIReady() {
player = new YT.Player('Video5', {
events: {
'onReady': vidplay}
});
}
function vidplay() {
var video = document.getElementById("Video5");
var button = document.getElementById("play");
if ( $("#play").hasClass("play")) {
button.addEventListener("click", function() {player.playVideo();});
button.addEventListener("click", function() {
button.className += " pause";
jQuery(button).removeClass('play');});
} else {
button.addEventListener("click", function() {player.pauseVideo();});
button.addEventListener("click", function() {
button.className += " play";
jQuery(button).removeClass('pause');});
}
}
</script>
</body>
</html>
|