Tagged: colorsection
-
AuthorPosts
-
March 31, 2016 at 11:57 am #605807
Hi I’ve got a homepage with a colorsection with an ID: home
The color section contains 1 layerslider with text and a selfhosted background video.My question: How can I set a custom ID for the (selfhosted mp4) video? I need the video to play once and then to only loop the last few seconds (so not the entire video) below is the script that should do the trick but I need to be able to set the ID of the video to: video.. Also for the below script to work do I need to set the video loop to false in section.php?
I’ve added this to the child theme functions.php:
function add_custom_script(){
?>
<script type=”text/javascript”>
var vidElem = document.getElementById(‘video’);
vidElem.addEventListener(“ended”, function () {
vidElem.currentTime = 15;
vidElem.play();
}, false);
</script>
<?php
}
add_action(‘wp_footer’, ‘add_custom_script’);thanks in advance!
Cindy
March 31, 2016 at 8:41 pm #606218Hi Cindy,
Can you post the link to your website please?
Regards,
JosueApril 1, 2016 at 7:36 am #606522Hi Josue,
I’ve created an admin for you
cheers Cindy
April 1, 2016 at 8:09 am #606532Hey!
If you rightclick and view source in the below code youc an see the id=”player_64_1067842201_1741576568″
<video class="avia_video" controls id="player_64_1067842201_1741576568"> <source src="http://www.change-agents.nl/wp-content/uploads/2016/03/changeagents9.mp4" type="video/mp4" /> </video>
Best regards,
VinayApril 1, 2016 at 8:30 am #606538Hi Vinay,
I’ve already tried that… but that id changes every time you reload the page?
cheers, Cindy
April 1, 2016 at 8:36 am #606541Is it possible to set a static ID for this video as it’s the only video in the entire site…
Cindy
April 1, 2016 at 4:22 pm #606763Hi!
Please add following code to Functions.php file in Appearance > Editor
function my_custom_id(){ ?> <script> jQuery(window).load(function(){ jQuery('#video video').attr('id','your-custom-id'); }); </script> <?php } add_action('wp_footer', 'my_custom_id');
and that should change the ID of your video on your #video color section
Best regards,
YigitApril 1, 2016 at 6:24 pm #606809Hi Yigit,
Thanks! That does work I’ve set the ID of the video now… Do I now also set the default video_loop in section.php to false? As it seems that the script I’ve posted with my question isn’t working yet…
cheers Cindy
April 4, 2016 at 5:09 am #607341Hey!
We replaced the code with:
function add_custom_script(){ ?> <script type="text/javascript"> (function($){ $('#cavideo').bind("play ended", function () { $(this).currentTime = 15; $(this).play(); }, false); })(jQuery); </script> <?php } add_action('wp_footer', 'add_custom_script');
Regards,
IsmaelApril 4, 2016 at 8:52 am #607447Hi Ismael,
Thanks for the update. I understand what you tried to do…. However this is still not working the video still loops from the beginning… I’ve tried to set the video_loop in section.php to false to see if that would do the trick, but then the video (of course?) doesn’t loop at all. It seems that my video does get the id of #cavideo but somehow we’re not able yet to control it the way we want…
April 4, 2016 at 9:17 am #607455Hi!
It’s actually working when I test it. The video starts again in the boat, not the blue water thingy or whatever it is. Make sure that you’re not looking on a cached version of the site. Remove browser cache or hard refresh the page.
UPDATE: We adjusted the code a bit.
Best regards,
IsmaelApril 4, 2016 at 9:53 am #607463Guys… you all rock!! *raising my coffee cup to all* This works like a charm…. Thank you so much for all your quick support. You’ve just made my day :D
cheers, keep up the good work!
Cindy
-
AuthorPosts
- The topic ‘Control selfhosted background video’ is closed to new replies.