Autoplay and looping on Wordpress header area in header.php
I am trying to make a video autoplay and loop in wordpress. It at www.essentialwebdesignandgraphics.com.
I did add iframe to header.php and got the video to display. It won't autoplay or loop. What can I do?
See code in header.php below.
Thanks
I did add iframe to header.php and got the video to display. It won't autoplay or loop. What can I do?
See code in header.php below.
Thanks
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html <?php language_attributes(); ?>><!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>" />
<?php $wl_theme_options = weblizar_get_options(); ?>
<?php if($wl_theme_options['upload_image_favicon']!=''){ ?>
<link rel="shortcut icon" href="<?php echo esc_url($wl_theme_options['upload_image_favicon']); ?>" />
<?php } ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri() . "/style.css"; ?>" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div>
<!-- Header Section -->
<div class="header_section hd_cover" >
<img style="position: absolute;" class="hd-img" src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
<div class="container" >
<!-- Logo & Contact Info -->
<div class="row ">
<div class="col-md-6 col-sm-12 wl_rtl" >
<div claSS="logo">
<a href="<?php echo esc_url(home_url( '/' )); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php if($wl_theme_options['upload_image_logo']){ ?>
<div style="max-width:420px">
<iframe width="420" height="315" src="//www.youtube.com/embed/duKL2dAJN6I?autoplay=1&loop=1&playlist=duKL2dAJN6I" frameborder="0" allowfullscreen></iframe>
</div>
<img class="img-responsive" src="<?php echo $wl_theme_options['upload_image_logo']; ?>" style="height:<?php if($wl_theme_options['height']!='') { echo $wl_theme_options['height']; } else { "80"; } ?>px; width:<?php if($wl_theme_options['width']!='') { echo $wl_theme_options['width']; } else { "200"; } ?>px;" />
<?php } else {
echo get_bloginfo('name');
} ?>
</a>
<p><?php bloginfo( 'description' ); ?></p>
</div>
</div>
<?php if($wl_theme_options['header_social_media_in_enabled']=='1') { ?>
<div class="col-md-6 col-sm-12">
<?php if($wl_theme_options['email_id'] || $wl_theme_options['phone_no'] !='') { ?>
<ul class="head-contact-info">
<?php if($wl_theme_options['email_id'] !='') { ?><li><i class="fa fa-envelope"></i><a href="mailto:<?php echo $wl_theme_options['email_id']; ?>"><?php echo esc_attr($wl_theme_options['email_id']); ?></a></li><?php } ?>
<?php if($wl_theme_options['phone_no'] !='') { ?><li><i class="fa fa-phone"></i><a href="tel:<?php echo $wl_theme_options['phone_no']; ?>"><?php echo esc_attr($wl_theme_options['phone_no']); ?></a></li><?php } ?>
</ul>
<?php } ?>
<ul class="social">
<?php if($wl_theme_options['fb_link']!='') { ?>
<li class="facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"><a href="<?php echo esc_url($wl_theme_options['fb_link']); ?>"><i class="fa fa-facebook"></i></a></li>
<?php } if($wl_theme_options['twitter_link']!='') { ?>
<li class="twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter"><a href="<?php echo esc_url($wl_theme_options['twitter_link']); ?>"><i class="fa fa-twitter"></i></a></li>
<?php } if($wl_theme_options['linkedin_link']!='') { ?>
<li class="linkedin" data-toggle="tooltip" data-placement="bottom" title="Linkedin"><a href="<?php echo esc_url($wl_theme_options['linkedin_link']); ?>"><i class="fa fa-linkedin"></i></a></li>
<?php } if($wl_theme_options['youtube_link']!='') { ?>
<li class="youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube"><a href="<?php echo esc_url($wl_theme_options['youtube_link']) ; ?>"><i class="fa fa-youtube"></i></a></li>
<?php } if($wl_theme_options['gplus']!='') { ?>
<li class="twitter" data-toggle="tooltip" data-placement="bottom" title="gplus"><a href="<?php echo esc_url($wl_theme_options['gplus']) ; ?>"><i class="fa fa-google-plus"></i></a></li>
<?php } if($wl_theme_options['instagram']!='') { ?>
<li class="facebook" data-toggle="tooltip" data-placement="bottom" title="instagram"><a href="<?php echo esc_url($wl_theme_options['instagram']) ; ?>"><i class="fa fa-instagram"></i></a></li>
<?php } if($wl_theme_options['vk_link']!='') { ?>
<li class="twitter" data-toggle="tooltip" data-placement="bottom" title="vk"><a href="<?php echo esc_url($wl_theme_options['vk_link']) ; ?>"><i class="fa fa-vk"></i></a></li>
<?php } if($wl_theme_options['qq_link']!='') { ?>
<li class="youtube" data-toggle="tooltip" data-placement="bottom" title="qq"><a href="<?php echo esc_url($wl_theme_options['qq_link']) ; ?>"><i class="fa fa-qq"></i></a></li>
<?php } if($wl_theme_options['whatsapp_link']!='') { ?>
<li class="linkedin" data-toggle="tooltip" data-placement="bottom" title="whatsapp"><a href="tel:<?php echo esc_attr($wl_theme_options['whatsapp_link']) ; ?>"><i class="fa fa-whatsapp"></i></a></li>
<?php } ?>
</ul>
</div>
<?php } ?>
</div>
<!-- /Logo & Contact Info -->
</div>
</div>
<!-- /Header Section -->
<!-- Navigation menus -->
<div class="navigation_menu " data-spy="affix" data-offset-top="95" id="enigma_nav_top">
<span id="header_shadow"></span>
<div class="container navbar-container" >
<nav class="navbar navbar-default " role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="sr-only"><?php _e('Toggle navigation','enigma');?></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="menu" class="collapse navbar-collapse ">
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'weblizar_fallback_page_menu',
'walker' => new weblizar_nav_walker(),
)
); ?>
</div>
</nav>
</div>
</div>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Are testing in a desktop browser? Mobile devices block autoplay because it uses the users data usage and expense.
Hum... There does seem to be a problem.
This works - https://www.youtube.com/em
This fails - https://www.youtube.com/em
The difference. The failing link is exactly from your page. The working link I changed then character code %3F to the character ? which should make no difference, as they both should represent the same character + %3F is actually more correct.
Same behavior occurs in latest Chrome + FireFox.
This is even more odd, as I thought this was surely a Chrome bug.
For now, try this minor change + see if your problem is fixed.
I don't have a good reason for why. Makes no sense to me.
This works - https://www.youtube.com/em
This fails - https://www.youtube.com/em
The difference. The failing link is exactly from your page. The working link I changed then character code %3F to the character ? which should make no difference, as they both should represent the same character + %3F is actually more correct.
Same behavior occurs in latest Chrome + FireFox.
This is even more odd, as I thought this was surely a Chrome bug.
For now, try this minor change + see if your problem is fixed.
I don't have a good reason for why. Makes no sense to me.
Premium Content
You need an Expert Office subscription to comment.Start Free Trial