Need Help regarding changing the height of the video in Flow theme

saminazahid2002
New Member
1 0 0

I have added a video using the youtube channel link to my store home page and unable to change its height. I am using the Flow theme. The video height is occupying fullscreen - What I want is to make it less heightened.

I also tried the following code as well and put it in custom HTML and the video is just squeezed down too much. Can any one tell what exactly is the problem in the code. 

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes">


<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src="https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: '100%',
videoId: 'vAK2Ney1Dic',
playerVars: { 'autoplay': 1, 'playsinline': 1,
'loop': 1,
'rel': 0 },
events: {
'onReady': onPlayerReady
}
});
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
</script>

 

Just to let you know that the same code is working fine on another store using Turbo theme but its just squeezing down the video in this store.

 

 

0 Likes