Add Video Slider in Shopify with Text Overlay - No App

Add Video Slider in Shopify with Text Overlay – No App

Foysal 0

In this tutorial, I am going to share how to add video slider in shopify online store without any app.

<section class="video-slider-area">
  <div class="video-slider">
    <video src="https://cdn.shopify.com/s/files/1/0549/1510/4943/files/Pexels_Videos_2716.mp4?v=1615646507" autoplay muted loop playsinline></video>
    <div class="video-text">
      <h1>For Your Loved One ❤️</h1>
    </div>
  </div>
</section>
video {
  width: 100% !important;
  height: auto !important;
}



 .video-text {
	 width: 100%;
	 height: 100%;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
}
 .video-slider-area {
	 height: 800px;
	 width: 100%;
	 position: relative;
	 overflow: hidden;
}
 video {
	 object-fit: cover;
	 position: absolute;
	 height: 500px;
	 width: 100%;
	 top: 0;
	 left: 0;
}


 .video-slider-area:after {
	 content: '';
	 display: block;
	 height: 100%;
	 width: 100%;
	 position: absolute;
	 top: 0;
	 left: 0;
	 background: rgba(0, 0, 0, .2);
	 z-index: 1;
}


.video-slider-area video {
    height: fit-content!important;
}



 h1 {
	 text-transform: uppercase;
	 font-weight: 900;
	 margin: 0 0 1rem;
	 padding: 0;
	 line-height: 1;
	 font-size: 32px;
	 font-weight: 700;
}
 @media (max-width: 400px) {
	 h1 {
		 font-size: 18px;
	}
}
 @media (min-width: 1200px) {
	 h1 {
		 font-size: 32px;
	}
}
 .video-text {
	 font-weight: 400;
	 font-size: 18px;
}

#EmbedVideoSlider #AddVideoSlider #ShopifyTutorial

💻 Welcome to * Embed Video Slider on Homepage ✅ How to add Video Slider or Video Header in Shopify *

📝 Video Description: https://www.ecommercethesis.com/

If you like the video don’t forget to:

👍 Give It A Thumbs Up
🎯 Hit The Subscribe Button
👉 Don’t Forget To Share

📌Subscribe: https://www.youtube.com/c/FoysalAhmedWebDesigner?sub_confirmation=1
📌 Follow me on Facebook: https://web.facebook.com/foysalonlinetrainer
📌 Follow me Linkedin: https://www.linkedin.com/in/foysal-ahmed/
📌 Visit my website: https://www.ecommercethesis.com

💻 My Services: https://www.fiverr.com/users/foysalelementor 🚀

🎤🎤 You can also check out the below playlist: 👇

🛑 Shopify Tutorial: https://bit.ly/32LVD21

🛑 Elementor Page Builder Tutorial: https://bit.ly/2Kj7oUT

🛑 Digital Marketplace using Mayosis Theme: https://bit.ly/3eFelxq

🛑 HTML Bangla Tutorial: https://bit.ly/2XTNOq4

🛑 CSS Bangla Tutorial: https://bit.ly/3amALAh

🛑 ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট : https://bit.ly/34X76P6

🛑 ওয়ার্ডপ্রেস থিম কাস্টমাইজেশন : https://youtu.be/Tw0J_D7Ahz0

🛑 ফটোশপ বাংলা টিউটোরিয়াল : https://bit.ly/2zlXnEh

🛑 ই কমার্স বিজনেস / ব্যবসা বাংলাদেশ : https://bit.ly/32Rw8MV

➡️ Disclaimer:

This Channel Does Not Promote Any illegal content, all contents provided by This Channel is meant for educational purpose only. Don’t Download Or Copy Video, Thumbnails, Music, Nothing From This Channel. It’s a Cyber Crime. All Videos of this Channel are Copyrighted by Foysal Ahmed!

Thank You 🙃🙃

#foysalahmed #webdesigner#wordpressdeveloper #shopifyexpert #shopifydeveloper #foysalonlinetrainer

How do I add video slider to Shopify?,
How do I create a slideshow in Shopify?,
Can you add video to Shopify?,
How to Embed Video Slider on Shopify,
Best Shopify Video Slider App,
Best Video Slider Apps for Shopify,
How to add a video slider or video header on my Shopify,
Responsive Video Slider for Shopify Online Store,
shopify video slider app,
embed video in shopify slideshow,
add video to shopify homepage,
shopify video banner,
how to put video in slideshow shopify,
shopify video plugin,
shopify product image slider code,
add video to shopify product page,
add video to shopify slideshow,
add video to shopify store,
add video to shopify theme,
add a video to shopify,
how to add a video to shopify homepage,
how to add a video to shopify product page,
how to add aliexpress video to shopify,
how to add a youtube video to shopify,
add video to shopify debut theme,
add video to shopify banner,
how to add background video to shopify,
add video content to shopify site,
can i add video to shopify,
shopify how to add video content,
how to add video to shopify website,
how to add video to shopify store,
adding video to shopify,
add video to shopify description,
add video to shopify website,
add video file to shopify,
add video to shopify header,
how to add video to shopify product page,
how to add video to shopify,
how to add video to shopify debut theme,
how to add video to shopify blog,
how to add video to shopify slideshow,
add video in shopify product,
add video in shopify,
add video into shopify,
add video section in shopify,
how to add video slider in shopify,
how to add background video in shopify,
how to add youtube video in shopify,
can i add video to my shopify store,
add looping video to shopify,
how to add video to my shopify store,
add mp4 video to shopify,
can i add a video to my shopify,
add video on shopify product page,
add video on shopify,
how to add video on shopify homepage,
how to add video to shopify product,
add video to shopify page,
add youtube video to shopify product page,
how to add a video to shopify home page,
adding videos to shopify,
how to add video to shopify homepage,
add vimeo video to shopify,
add youtube video to shopify,
add youtube video to shopify homepage,
how to add your own video to shopify,
adding video to shopify product page,
add video shopify,

Foysal

I'm a Web Designer, eCommerce Business Developer based in Habiganj. I specialize in creating e-commerce business websites for great individuals and small-medium sized businesses, helping them to market their products or services successfully on the web. Interested in working together? Get in touch so we can discuss your requirements.

Leave a Reply