Question

我正在为youtube视频创建一个容器，它在悬停时扩展到2x，但问题是即使在200px上它显示的播放器选项设置为100.让我知道如何让我的youtube播放器弹出提供200px的选项。

＆＃13;

package com.example.android.mediaplayerdemonstration;

import android.media.MediaPlayer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends AppCompatActivity {
    @Override
    protected void onPause() {
        super.onPause();
        mySound.release();


    }
    @Override
    protected void onResume() {
        super.onResume();
        if(mySound != null)
            mySound.start();
    }

    MediaPlayer mySound;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mySound = MediaPlayer.create(MainActivity.this,R.raw.sleep);
        mySound.start();
        mySound.setLooping(true);
    }



    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }


}

＆＃13;

.container {
  width: 400px;
  border: 1px solid #CECECE;
  margin: auto;
  height: 400px;
  position: relative;
}
.rect {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  margin: auto;
  left: 150px;
  top: 150px;
  position: absolute;
  transition: transform 2s, border-width 2s;
  transform-origin: center;
}
.rect:hover {		
  transform: scale(3);
  border-width: 1px;
}
.rect iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 96%;
  height: 96%;
}

＆＃13;

Answer 1

https://jsfiddle.net/uu1rz6vp/1/

CSS变换仅缩放元素，要更改实际大小，您必须将其设置为width和height，如下所示。我还更新了定位值并添加了翻译以使其居中对齐。

.rect {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.rect:hover {       
  width: 300px;
  height: 300px;
}

.container {
  width: 400px;
  border: 1px solid #CECECE;
  margin: auto;
  height: 400px;
  position: relative;
}
.rect {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  transition: width 2s, height 2s, transform 2s, border-width 2s;
  transform-origin: center;
}
.rect:hover {		
  width: 300px;
  height: 300px;
  border-width: 1px;
}
.rect iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 96%;
  height: 96%;
}

<div class="container">
  <div class="rect">
    <iframe src="https://www.youtube.com/embed/qLUWTjL2IH0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>	

<div class="static-container">
  <iframe width="100" height="100" src="https://www.youtube.com/embed/qLUWTjL2IH0" frameborder="0" allowfullscreen></iframe>
</div>

<div class="static-container">
  <iframe width="200" height="200" src="https://www.youtube.com/embed/qLUWTjL2IH0" frameborder="0" allowfullscreen></iframe>
</div>

Youtube播放器选项显示

1 个答案: