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>
Who is Participating?
Experts Exchange Solution brought to you by
Enjoy your complimentary solution view.
Get this solution by purchasing an Individual license!
Start your 7-day free trial.
I wear a lot of hats...
"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.
LVL 85
Are testing in a desktop browser? Mobile devices block autoplay because it uses the users data usage and expense.
Experts Exchange Solution brought to you by
Your issues matter to us.
Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.
Start your 7-day free trial
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP
From novice to tech pro — start learning today.
-
Microsoft ApplicationsCertification: MOS Microsoft Office Specialist - Outlook 2016 Par… 211 lessons
Experts Exchange Solution brought to you by
Enjoy your complimentary solution view.
Get this solution by purchasing an Individual license!
Start your 7-day free trial.